对于使用javascript操作节点,虽然简单,但是很多时候容易忘记其中的一些小细节,下面来总结一些。
首先对于一个DOM元素,记为element,然后我用 document.childNodes获取返回的对象,当然实际上这是一个包含若干子节点的数组,很多时候我们会忽略一些实际存在的节点,比如下面的例子:
<div id="wraper" class="my-wraper" data-kasol="1">
<div>
<p>JavaScript</p>
</div>
</div>
这里最外层的div为上述的element,返回的结果记为arrs,那么arrs[0]的内容可能会跟预想不太一样,假如这里有一个换行,那么也会被识别为一个文本节点,所以不是返回下一层的div节点,而是返回一个文本节点。说到这,顺便讲一下节点的类型,见下图
:
而且当我们进行节点操作的时候,不同浏览器会有不同的做法,比如火狐会在node.nextSibling返回上述各种类型的节点,而IE则会寻找元素节点,所以必要的时候我们可以用nodetype来筛选想要的节点类型