3. DOM
3.1 什么是DOM
DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档
文档表示的就是整个的HTML网页文档
对象
对象表示将网页中的每一个部分都转换为了一个对象。
模型
使用模型来表示对象之间的关系，这样方便我们获取对象。
3.2 节点
常用节点分为四类
文档节点 ：整个 HTML 文档
元素节点 ： HTML 文档中的 HTML 标签
属性节点 ：元素的属性
文本节点 ： HTML 标签中的文本内容
document.getElementById()
根据id属性值获取一个元素节点对象。
元素节点.firstChild;
获取元素节点的第一个子节点，一般为文本节点
可以通过元素节点来获取指定的属性节点
3.3 获取元素节点
3.3.1 通过document对象调用
getElementById()
– 通过 id 属性获取 一个 元素节点对象
getElementsByTagName()
– 通过 标签名 获取 一组 元素节点对象
getElementsByName()
– 通过 name 属性获取 一组 元素节点对象
3.4 获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()
– 方法 ，返回当前节点的指定标签名后代节点
childNodes
– 属性 ，表示当前节点的所有子节点
firstChild
– 属性 ，表示当前节点的第一个子节点
lastChild
– 属性 ，表示当前节点的最后一个子节点
3.5 获取父节点和兄弟节点
通过具体的节点调用
parentNode
– 属性 ，表示当前节点的父节点
previousSibling
– 属性 ，表示当前节点的前一个兄弟节点
nextSibling
– 属性 ，表示当前节点的后一个兄弟节点
3.6 元素节点的属性
其他属性
3.7 使用CSS选择器进行查询
3.8 节点的修改
4. 事件
4.1 通过HTML标签的属性设置事件
<button οnclick= "alert('hello');alert('world')"> 按钮 </button>
设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。
如果在函数的最后return false则会取消元素的默认行为
4.2 通过DOM对象的属性绑定
var btn = document.getElementById('btn');
btn.onclick = function(){
alert("hello");
};
这种写法将HTML代码和JS写在不同的位置，维护 起来更加容易
4.3 设置事件监听器
btn. addEventListener ('click' , function(){alert("hello");});
removeEventListener() 和 detachEvent()移除事件
4.4 事件对象
DOM标准的浏览器会将一个event对象传入到事件的处理程序
当中。无论事件处理程序是什么都会传入一个event对象。
btn.onclick = function(event){
alert(event.type);
};
4.5 事件的触发
事件的发生主要是由用户操作引起的。
比如mousemove这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。
当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下事件没触发一次，函数就会执行一次。
因此设置鼠标移动的事件可能会影响到鼠标的移动速度。 所以设置该类事件时一定要谨慎
4.6 事件的传播 （*）
5. BOM
5.1 什么是BOM
ECMAScript无疑是JavaScript的核心，但是要想在浏 览器中使用JavaScript，那么BOM（浏览器对象模型） 才是真正的核心。
BOM 提供了很多对象，用于访问浏览器的功能，这些 功能与任何网页内容无关。
BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而 控制浏览器的各种行为
5.2 window对象
5.3 系统对话框
浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。
它们的外观由操作系统及（或）浏览器设置决 定，而不是由 CSS 决定。
显示系统对话框时会导致程序终止，当关闭对 话框程序会恢复执行。
5.4 Location对象
版权声明：本文为weixin_45817392原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。