Javascript 操作 DOM 的一些细节备注（一）

　　近日在看一些 Javascript 的资料，忽然发现，因为经常使用一些框架类库，所以忽略了许多细节。这里记录下来备查。

　　1、标准 DOM 节点导航属性：parentNode、previousSibling、nextSibling、childNodes、firstChild、lastChild

　　2、常见的 DOM 节点类型(nodeType)：元素节点为 1，文本节点为 3，文档节点(document)为 9

　　3、标准 DOM 修改方法：原生的 DOM 修改方法都是以父元素为基准来进行的，主要有：insertBefore(newElm, oldElm)、appendChild(elm)、replaceChild(newElm,oldElm)、removeChild(elm)

　　4、插入文本，可通过 document.createTextNode(text) 创建文本节点，再进行插入

　　5、事件的捕获与冒泡：事件捕获的顺序与冒泡的顺序是相反的。假设 div 内有一个 a，当点击 a 时，首先是 div 捕获到点击事件，然后 a 才捕获到，但处理则相反，首先调用 a 的事件处理程序，然后才调用 div 的。在 W3C 的规范中是允许在捕获阶段就添加事件的，但 IE 中不允许这样做。

　　6、阻止事件冒泡：

function stopBubble(e) {if (e && e.stopPropagation)e.stopPropagation();elsewindow.event.cancelBubble = true; // IE（泛指不遵循 W3C 标准的 IE 浏览器，下同）}

　　7、事件绑定方式：

　　　　1) HTML 标签内绑定，如 <input type="button" onclick="btnClick();" />，其实标签内绑定与下面提及的传统事件绑定是同一回事，标签内绑定，浏览器会生成一个匿名函数，譬如刚才的例子，对于浏览器而言，实质上是 btn.onclick = function() { btnClick(); }

　　　　2) 传统事件绑定，如 elm.onclick = function(e) { ... }——参数 e，在 W3C 中表示 event 对象，但 IE 并不使用这个参数，而是通过 window.event 获取 event 对象。在传统事件绑定中，事件处理函数中的 this 都会指向调用事件的元素，包括 IE。

　　　　3) 现代事件绑定：IE 及 W3C 的处理方式差别较大。

　　　　　　W3C 的处理方式：elm.addEventListener(事件名称, 函数, 是否捕获阶段)，事件名称不用加 'on'，如 'click'，是否捕获阶段，若为 true，则在事件捕获阶段触发，如上述第 5 条所述的情形，会先调用 div 上的事件处理程序，再调用 a 的事件处理程序。若为 false，则在事件冒泡阶段触发，此时，会先调用 a 的事件处理程序，再调用 div 的事件处理程序。在 W3C 的处理方式中，事件处理函数中的 this 仍会指向调用事件的元素。

　　　　　　IE 的处理方式：elm.attachEvent(事件名称, 函数)，事件名称前必须加 'on'，如 'onclick'。在 IE 中，函数的 this 会指向 window，而不是调用事件的元素，并且 IE 也不能在事件捕获阶段触发事件。

　　8、在事件中阻止 DOM 元素的默认行为：默认行为指如点击 a 则会打开新链接这一类型的行为。其实对于传统事件绑定方式，简单的在事件处理函数中返回 false，就可以阻止其默认行为。在 ASP.NET 的程序中，常会看到这样的写法 <asp:Button id="btnSave" runat="server" onClientClick="return checkForm()" />，这个 onClientClick 事件，在前端页面中，会被处理为 btnSave.onclick = function() { return checkForm(); }，所以我们只要简单的在 checkForm 函数中返回 false，就可以阻止提交行为。

　　　　但要在通过现代事件绑定方式绑定的事件处理中阻止默认行为，则有些麻烦：

function stopDefault(e) {if (e && e.preventDefault)e.preventDefault();elsewindow.event.returnValue = false;return false; // 这里返回 false 也是不可少的}

　　9、window.onload 事件发生在所有 HTML 节点都加载完毕（包括图像）时，当 HTML 文档较大时，该事件发生的时间点通常较为靠后。所以在 JQuery 或其它一些框架类库中，会使用 setInterval(function() {...}, 10) 这样的方式来不断检测当前的 DOM 元素是否都已经建立，以提前加载用于页面初始化的 JS 程序，而不是坐等 window.onload 事件触发。

　　10、通过 script 标签引入的脚本会最先被加载。