第八章 DOM模型二

1.获取 DOM 节点

 元素节点 var list = document.getElementById("list")

 属性节点 var href = list.getAttributeNode("href")

 文本节点 var text = list.firstChild

2.节点属性

nodeType  （节点类型）

nodeType 属性以数字值返回节点的类型

 元素节点的 nodeType 返回值为 1    list

 属性节点的 nodeType 返回值为 2    href

 文本节点的 nodeType 返回值为 3    text

nodeType 是只读的

 

nodeName（节点名称）

 

nodeName 属性依据节点的类型返回其名称

 元素节点的 nodeName 与标签名相同

 属性节点的 nodeName 与属性名相同

 文本节点的 nodeName 始终是 #text

nodeName 是只读的

 nodeName 返回标签名为大写标签名

 

nodeValue （节点值）

 

nodeValue 属性返回或设置当前节点的值

 元素节点的 nodeValue 是 undefined 或 null

 属性节点的 nodeValue 是属性值

 文本节点的 nodeValue 是文本本身

 

4.DOM 节点属性小结

5.节点操作

DOM提供了操作节点的方法:

第一步：添加一个DOM节点

生成一个元素节点： document.createElement( name )

 通过指定标签名创建一个元素节点，返回一个节点对象。

例：var btn=document.createElement("button");

生成一个文本节点：document.createTextNode( text )

 创建文本节点，返回文本节点对象。

 例：var text=document.createTextNode( "hello!" );

第二步：把生成的节点作为某一个节点的子节点进行添加

向父节点的末尾添加新的子节点： node.appendChild( newNode )

 

删除一个DOM节点

删除元素节点或文本节点

从子节点列表中删除某个节点：parentNode.removeChild(childNode)

通过父节点删除本节点：

           myParent.removeChild( mySelfNode )

通过自己删除本节点：

           mySelfNode.parentNode.removeChild( mySelfNode )

 

 

修改一个DOM节点