JavaScript操作HTMLDOM节点的基础教程_基础知识

父子关系

兄弟关系

通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以有效的解决此问题。

通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以有效的解决此问题。

NTOE：细心的人会发现，在节点遍历的例子中，body、ul、li、p节点之间是没有空格的，因为如果有空格，那么空格就会被当做一个TEXT节点，从而用ulNode.previousSibling获取到得就是一个空的文本节点，而不是

NOTE：此兼容方法为初稿，还未进行兼容性测试。
接口获取元素节点

getElementById

获取文档中指定 id 的节点对象。

动态的获取具有指定标签元素节点的集合（其返回值会被 DOM 的变化所影响，其值会发生变化）。此接口可直接通过元素而获取，不必直接作用于 document 之上。

getElementsByClassName
获取指定元素中具有指定 class 的所有节点。多个 class 可的选择可使用空格分隔，与顺序无关。
var elements = element.getElementsByClassName('className');
NOTE：IE9 及一下版本不支持 getElementsByClassName
兼容方法

querySelector / querySelectorAll

获取一个 list （其返回结果不会被之后 DOM 的修改所影响，获取后不会再变化）符合传入的 CSS 选择器的第一个元素或全部元素。

NOTE: IE9 一下不支持 querySelector 与 querySelectorAll
创建节点

创建节点 -> 设置属性 -> 插入节点

修改节点

textContent
获取或设置节点以及其后代节点的文本内容（对于节点中的所有文本内容）。

NOTE：不支持 IE 9 及其一下版本。
innerText （不符合 W3C 规范）
获取或设置节点以及节点后代的文本内容。其作用于 textContent 几乎一致。

NOTE：不符合 W3C 规范，不支持 FireFox 浏览器。
FireFox 兼容方案

插入节点

appendChild

在指定的元素内追加一个元素节点。

insertBefore

在指定元素的指定节点前插入指定的元素。

删除节点

删除指定的节点的子元素节点。

innerHTML

获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点（去除之前添加的事件和样式）。innerHTML 不检查内容，直接运行并替换原先的内容。
NOTE：只建议在创建全新的节点时使用。不可在用户可控的情况下使用。

存在的问题+

• 低版本 IE 存在内存泄露
• 安全问题（用户可以在名称中运行脚本代码）

PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，

值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。