版权声明：文章为作者自己原创文章，转载请注明出处。 https://blog.csdn.net/qq_37128049/article/details/84886000
今日内容：
1.JavaScript：
1.ECMAScript：
2.Bom：
3.Dom：
4. 事件
Dom简单学习： 为了满足案例要求
* 功能：控制html文档的内容
* 代码： 获取页面标签（元素）对象Element
* 通过元素ID获取元素对象。
* document.ElementById（）；
* 操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个？
2.查看API文档，找其中有哪些属性可以设置
2.修改标签体内容：
* 属性：innerHTML
* 代码演示：DOM：
1.获取对象：decument.getElementById("想获取的元素其id值");
2.通过元素对象：可以对元素进行操作，如添加内容等： 元素对象名.innerHTML=“元素内部的HTML内容”；也可以使用innerText，但是它只能输入文本信息。
事件简单学习：
* 功能：某些组件被执行了某些操作后，触发某些代码的执行。
* 造句：xxx被xxx，我就xxx
* 如何绑定事件：
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码。
1.事件：onclik
* 直接标签绑定：如：<img id="light" src="img/off.gif" onclick="alert('我被点了');">
也可以定义一个function方法，onclick直接调用方法。
缺点：事件和标签绑定在一起，耦合性比较高。
* 使用docment.getElemtById获取对象，再使用onclik绑定事件。
优点：可以避免对html代码侵入，耦合性低。
*更换灯泡的步骤：
1.获取标签
2.给标签添加点击事件
3.每次点击切换图片
BOM：
1.概念：Browser Object Model 浏览器对象模型
2.组成：
* 将浏览器
* 划分为五个部分：
1.Navigator 浏览器对象
2.window 窗口对象（包含了历史记录，地址，内容（DOM对象document））
3.Location 地址栏对象
4.history 历史记录对象（当前浏览的，可以前进后退的对象）
5.Screen 显示器屏幕对象（不重要）
3.Window：窗口对象
1.创建
* Window对象不需要创建，可以直接使用。
* Window.方法名
* Window可以省略。 方法名();
2.方法：
* 与弹出框有关的方法：
* alert（） 显示带有一段消息和一个确认按钮的警告框
* comfirm（）显示带有一段消息以及确认按钮和取消按钮的对话框（常用）
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则返回false；
* prompt（） 显示可提示用户输入的对话框
* 返回值：获取用户输入的值；
* 与打开关闭有关的方法：
* open(); 打开一个浏览器窗口。
* close(); 关闭浏览器窗口，谁调用我，我关谁。 如果直接写close，则为window.close();，而该方法是谁调用它，它就会关闭掉它，所以应该写成：新窗口.close();
* 与定时器有关的方法：
* setTimeout() 在指定的毫秒数后调用函数或计算表达式
* 一次性定时器
* 参数：
* js代码或者方法对象
setTimeout（"fun();",3000); 方法
setTimeout（"alert(我被执行了)",3000); 对象
* 毫秒值 setTimeout（"alert(我被执行了)",3000); 具体js代码
* clearTimeout(id) 取消由 setTimeout()方法设置的timeout。
* setInterval(fun,2000); 循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式
* clearInterval(id) 取消由setInterval（）设置的timeout。
方法：Ctrl+Shift+T ：还原浏览器历史记录。
3.属性:
1.获取其他BOM对象
history
location
Navigator
Screen
2.获取DOM对象
window.document.getElementById("");
4.Location:地址栏对象
1. 创建：
1.window.location
2.location
2. 方法：
* reload(); 刷新当前页面； location.reload();
* href(); 获取href属性； location.href;//获取当前地址信息 location.href="www.itcast.cn"; 可以绑定点击事件，点击后自动跳转网页。
注意：在参数中传对象不需要加引号，传方法需要加对象.function函数对象如果不加括号就是对象，加对象就是方法。
5.History：历史记录对象
1.创建（获取）：
1.window.history
2.history
2.方法：（这里的历史记录是指在一个窗口中曾经打开的多次目录，跟浏览器自带的前进后退是一样的功能）
* back（） 加载history列表中的前一个URL。
* forward（） 加载history列表中的下一个URL。
* go() 加载history列表中的某个具体页面。
3.属性：
* length 返回当前窗口历史列表中的URL数量。
DOM：它是将html文档表达为树结构（dom树），后期可以通过树形结构的层级得出上一级的对象。
* W3C DOM标准被分为3个部分：
* 核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象 （重点
* Element：元素对象 （重点
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
* Node：节点对象，其他5个的父对象 （重点
* XML DOM - 针对XML文档的标准模型
* HTML DOM - 针对HTML文档的标准模型
一句话来讲：DOM 将标签都封装成对象，让我们能方便的去操作这些标签。
* 核心DOM模型 文档对象
* CRUD：增删改查：
* 创建（获取）：在html dom模型中可以使用window对象获取
1.window.document
2.document
* 方法:
1.获取Element对象(前三个与基本选择器：id，标签，class；）：
* getElementById(): 根据id属性值获取元素对象。id属性值一般唯一。
* getElementsByTagName(): 根据元素名称获取元素对象们。返回值是一个数组。
* 比如：document.getElementsByTagName("div");
* getElementSByClassName():根据Class属性值获取元素对象们，返回值是一个数组。
* 比如: document.getElementsByClassName("cls1");
* getElementsByName():根据name属性值获取元素对象们，返回值也是一个数组。
* 比如：document.getElementsByName("username");
1.name属性值一般用于表单提交，所以不是所有的标签都会有name属性值，所以最好一般不要用name的方法来获取元素。input标签一般会有name属性。
2.如果有重复的id标签，但是document.getElementById返回的id是获取第一个id的对象，而不会报错。
2.创建其他DOM对象：
* createAttribute(name) :创建属性
* createComment()： 创建注释
* createElement()：创建元素
* createTextNode()：
这里创建的对象跟当前的html页面没有任何关系，所以需要使用这些元素的时候需要添加进来。这些对象是空，需要自己为其添加内容。
* 属性：
* Element:元素对象
1.获取/创建：通过document来获取和创建
2.方法：
* removeAttribute():删除属性
* setAttribute():添加属性
如：var element_img= document.getElementsByClassName
element_img.setAttribute("class",img);
3.应用：可以用来与控件绑定事件，对其他的元素添加属性和删除属性。
* Node： 节点对象，其他5个的父对象
* 特点：所有DOM对象都可以被认为一个节点。
* 方法：
* CRUD 树：
* appendChild(): 向节点的子节点列表的结尾添加新的子节点
* removeChild(): 删除（并返回）当前节点的子节点
* replaceChild():用新节点替换一个子节点
* 属性：
* parentNode 返回节点的父节点。
* HTML DOM
1.标签体的设置和获取：innerHTML
* 替换：元素名.innerHTML="<input type='text';"
* 添加：元素名.innerHTML+=
2.使用html元素对象的属性
3.控制样式
1.使用元素的style属性来设置
如：//修改方式1：
div1.style.border="1px solid red";
div1.style.width="200px";
2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
var div2= document.getElementById("div2");
div2.onclick=function(){
div2.className="d1"; //这里的d1是id选择器已经配置好的样式。
}
注意：类似于font-size的，用style连接时，写成fontSize；
* 可以通过js控制元素的样式。
事件监听机制:
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件： 某些操作，如：单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。 如： 按钮 文本输入框...
* 监听器： 它是一些代码，当事件发生时，这些代码会被执行。
* 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
* 常见的事件：
1.点击事件
* onclick：单击事件
* ondbclick：双击事件
2.焦点事件
* onblur：失去焦点
* onfocus：元素获得焦点
3.加载事件
* onload：一张页面或一幅图像被加载完成
* window.onload=function(){};
4.鼠标事件
* onmusedown 鼠标按键被按下
* 定义方法时，定义一个形参，接受event对象
* event对象的button属性可以获取鼠标
* onmouseup 鼠标按键被松开
* onmousemove 鼠标被移动
* onmouseover 鼠标移到某元素之上
* onmouseout 鼠标从某元素移开
5.键盘事件
* onkeydown 某个键盘按键被按下
* onkeyup 某个键盘按键被松开
* onkeypress 某个键盘按键被按下并松开
6.选择和改变
* onchange 域的内容被改变
* onselect 文本被选中
7.表单事件：
* onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false阻止表单提交
* onreset 重置按钮被点击。
我们只需要给具体的标签添加事件，到时候如果有事件被触发，对应的代码就会执行。
transition：margin-top 200ms; 动画。
/^[\u4e00-\u9fa5]+$/ 中文