日期:2014-05-16  浏览次数:20323 次

javascript操作DOM-------转

javascript操作DOM

w3c把文档表示为树。我们先从dom的继承来说起:当浏览器解析完文档后,每个节点并非就是一个简单的Element对象实例,而是继承了很多东西。看下面的图


从上图可以看出,w3c定义的根是Node节点,DocumentElements都继承自Node节点,而下面的又扩展了HTMLDocumentHTMLElement,其实不但有HTML的内容,还有xml的扩展。
一、先看一下核心Node所具有的属性和方法:
.childNodes //返回节点的所有的子节点数组。是NodeList类型。在循环遍历时,取出一个子节点用item()来取。

Javascript代码

  1. <script> ??
  2. var?node?=?document.getElementById"nodeId");? ??
  3. for(var?i?=?0;i&lt;node.childNodes.length;i++) ??
  4. { ??
  5. ?????node.childNodes.item(i);//取出每一个子节点? ??
  6. }???

<script>

var node = document.getElementById"nodeId");

for(var i = 0;i&lt;node.childNodes.length;i++)

{

???? node.childNodes.item(i);//取出每一个子节点

}


.firstChild //
第一个子节点
.lastChild //
最后一个子节点
.attributes //
所有的属性的集合。在遍历属性时,IE中所有的属性都能遍历到,即使属性值为null;而在firefox中只遍历有值的属性,无值的是遍历不到的。在遍历些属性时,取其中一个也是使用item()
.nextSibling //
下一个兄弟节点
.previousSibling //
上一个兄弟节点
.parentNode //
父节点
.nodeType //
节点类型 节点如下:

?

常见类型