DOM之操作技术

1.1 动态脚本

　　动态加载的外部JS文件能够立即运行。难点在于如何知道脚本加载完成了？可以通过事件来检测。IE对待<script>元素特殊性，不允许DOM访问其子节点。使用元素的text属性来指定JS代码。

1.2 动态样式

　　IE对待<style>元素特殊性，不允许DOM访问其子节点。使用元素的styleSheet属性来指定代码。小心IE的styleSheet属性，在重复设置和设置为空时，可能导致浏览器崩溃。

1.3 操作表格

　　为了方便创建表格，HTMLDOM为<table>、<tbody>和<tr>元素添加了一些属性和方法。使用这些属性和方法，操作表格更加方便。

1.4 使用NodeList

　　理解NodeList及其”近亲“NameNodeMap和HTMLCollection，是从整体上理解DOM的关键所在。这三个集合都是”动态的“。

var divs = document.getElementsByTagName("div"),
      i,
      div;

    for( i = 0; i < divs.length; i++) {
        div = document.createElement("div");
        docment.body.appendChild(div);
    }

这段代码会是一个死循环，因为i的值和divs.length的值同步增长。因修改成如下形式：

var divs = document.getElementsByTagName("div");
      i,
      len,
      div;

    for ( i = 0, len = divs.length; i < len; i++) {
        div = document.createElement("div");
        document.body.appendChild(div);
    }

1.6 小结

　　DOM由各种节点构成。

　　1）最基本的节点类型是Node，用于抽象地表示文档中一个独立的部分；所有其他类型继承自它。

　　2）Document类型表示整个文档，是一组分层节点的根节点在JS中，document对象是Document类型的一个实例。

　　3）Element节点表示文档中的所有HTML或XML元素。

　　4）另外的节点类型，分别表示文本内容、注释、文档类型等。

　　访问DOM的操作在处理<script>和<style>元素时还是存在一定复杂性。某些浏览器会将它们与其他元素区别对待。导致了使用innerHTML和创建新元素时的一些问题。在JS中操作DOM是非常昂贵的操作，应尽量减少。