**DOM节点类型:**
| 类型 | 值 | 说明 |
|---|---|---|
| ELEMENT_NODE | 1 | 元素节点 |
| ATTRIBUTE_NODE | 2 | 属性节点 |
| TEXT_NODE | 3 | 文本节点 |
| COMMENT_NODE | 8 | 注释节点 |
| DOCUMENT_NODE | 9 | 文档节点 |
1. <ul>
2. <li>HTML5</li>
3. <li>CSS3</li>
4. <li>PHP</li>
5. <li>JavaScript</li>
6. </ul>
1. var list = document.querySelector('ul')
2. console.log(list.childNodes)
3. // childNodes属性返回子节点的集合 以childNodes对象
4. console.log(list.childNodes.length) //9
5. console.log(list.childNodes[0].nodeType) //3
6. console.log(list.childNodes[0]) //#text //<ul>和<li>直接的空白节点
7. console.log(list.childNodes[1]) //<li>HTML5</li>
8.
9. for(var i = 0;i < list.childNodes.length;i++){
10. // console.log(list.childNodes[i].nodeName)
11. // nodeName得到节点类型的名称 是字符串 #text表示文本 li表示标签
12.
13. // console.log(list.childNodes[i].nodeType)
14. // nodeType得到的是节点类型的值 数字1表示元素节点 3表示文本节点
15.
16. // console.log(list.childNodes[i].nodeType)
17. // nodeValue 属性规定节点的值
18. // 元素节点是undefined 或 null
19. // 文本节点是文本本省
20. // 属性节点是属性值
21.
22. var node = list.childNodes[i]
23. if(node.nodeType != Node.TEXT_NODE){
24. console.log(node.nodeName)
25.
26. var liChildren = node.childNodes
27. console.log(liChildren[0].nodeValue)
28.
29. var liChild = liChildren[0]
30. console.log(liChild.nodeName)
31. console.log(liChild.nodeValue)
32. }
33.
34. }
1. var textNode = list.childNodes[1].childNodes[0]
2. console.log(textNode.textContent)
textContent 和 nodeValue 都可以弹出文本节点的内容
1. textNode.appendData(':HTML5的第五个版本') //HTML5:HTML5的第五个版本
2. // 在结尾处添加新的文本
3.
4. textNode.insertData(1,'----') //H----TML5:HTML5的第五个版本
5. // 在指定的位置插入新文本
6.
7. textNode.replaceData(5,5,'****') //H----****HTML5的第五个版本
8. // 替换指定区域的文本
9. // 三个参数 (指定的位置,替换的数量,'替换的字符')
10.
11. textNode.deleteData(1,5) //H***HTML5的第五个版本
12. // 删除指定区域的文本
13.
14. alert(textNode.substringData(7,10)) //L5的第五个版本
15. // 获取指定区域的文本 substringData（开始位置，字符的数量）
16.
17. alert(textNode.length)
18. // 获取文本节点的个数
19.
20. alert(textNode.data)
21. // 获取文本节点的内容
22.
23. alert(textNode.wholeText)
24. // 获取文本节点的内容
25.
26. textNode.remove()
27. // 移除文本节点