JavaScript DOM节点操作

  首先来对DOM各个字母的意思简单作下解释：

“D”：document ， 文档

“O”：object , 对象

“M”：model , 模型

 

一、节点：

分为三种：

         1.元素节点  

         2.文本节点

         3.属性节点

扩展：

父节点： mydiv.parentNode;

相邻： mydiv.nextSibling; mydiv.previousSibling

子节点： mydiv.childNodes  返回元素的所有子节点 包括空白的 textNode

firstChild第一个子节点   lastChild最后一个子节点

所有子节点: mydiv.children   不包含空白的textNode

子节点操作：

appendChild() 向节点添加最后一个子节点

mydiv.appendChild(“p”);

 

insertBefore() 在指定的已有子节点之前插入新的子节点。

如果未指定已有子节点，会在结尾插 入 newnode。

removeChild() 移除指定子节点

 

二、获取元素

1.document.getElementById 获取指定id的元素引用

eg:

<div id=“div1”>

     var mydiv = document.getElementById(“div1”);   通过元素ID来获取

</div>

2.document.getElementsByTagName(“li”) 获取指定元素集合 注意返回的是一个数组

3.document.getElementsByClassName 获取指定样式的元素集合 注意返回的是一个数组

 

属性操作：

object.getAttribute(“id”) 获取属性

setAttribute(“id”,”mydiv”)  设置属性

removeAttribute(“id”)  删除属性