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节点