js操作DOM事件

document.head;document.body;可直接获取文档的head，body节点
document.getElementById()：返回指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。
document.getElementsByClassName()：返回返回一个类似数组的对象（HTMLCollection类型的对象）。不仅可以在document对象上调用，也可以在任何元素节点上调用。
document.getElementsByTagName()：直接返回所有指定标签的元素，也是类数组对象。
document.getElementsByName：用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象
querySelector():返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。
querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象

添加元素：appendChild()在元素末尾添加元素，insertBefore(newContent, newDiv.firstChild)：在某个元素之前插入元素；replaceChild(newElement, oldElement);两个参数，要插入的元素和要替换的元素
parentNode.removeChild(childNode);删除一个元素

attachEvent和detachEvent是IE早期版本实现事件绑定的方法，后期版本已经支持addEventListener和removeEventListener。他们的主要区别：
1.所传参数个数不同

addEventListener可以接受3个参数：1. 要处理的事件名。2. 作为事件处理程序的函数。3. 布尔值（ture代表捕获阶段调用事件处理程序false代表冒泡阶段调用事件处理程序,默认为false）
attachEvent要接受2个参数：1. 要处理的事件名。2. 作为事件处理程序的函数
2.第一个参数意义不同

addEventListener第一个参数是事件类型（比如click，load）
attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
3.事件处理程序的作用域不相同(这是主要区别)

addEventListener的this就是其所属元素的作用域内运行
attachEvent会在全局作用域中运行，因此this等于window
4.为一个元素添加多个事件时执行顺序不同

addEventListener会以添加他们的顺序执行
attachEvent的执行是没有顺序的(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。

IE事件冒泡：从目标元素身上又一层一层往上传递，最终到html根节点。
DOM2事件传播机制：
- 捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
- 到达事件的目标节点，执行目标节点的时间处理程序。
- 事件冒泡（bubbling），事件从目标节点一级一级向上回溯，直到顶级文档树节点。

event.preventDefault();取消世间的默认行为。
event.stoppropagation();阻止事件冒泡。

文章作者:findmoon

发布时间:2016年09月05日 - 20时17分

最后更新:2016年12月07日 - 20时53分

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。