1. <ul>
2. <li>HTML5</li>
3. <li>CSS3</li>
4. <li>JavaScript</li>
5. <li>Java</li>
6. </ul>
1. var ul = document.getElementsByTagName('ul')[0]
2. var li2 = ul.childNodes[3]
3. // 获取子节点 包含文本节点 会受到HTML文档中空白字符的干扰
4.
5. var li2 = ul.children[1]
6. // children获取子元素/标签 不包含空白字符
7. console.log(li2)
8. alert(li2.outerHTML)
9. // 获取包含本身在内的所有html代码
10.
11. document.write('123')
12. document.write('456')
13. document.writeln('123')
14. document.writeln('456')
15.
16. document.write('<pre>')
17. for(var k in li2){
18. document.writeln(k)
19. // 可以在</body>之前 向HTML文档或当前页面写入新的文本
20. }
21. document.write('</pre>')
22.
23. alert(li2.previousElementSibling.outerHTML)
24. // previousElementSibling 属性返回同一树层级中
25. // 指定节点的前一个节点
26. // 被返回的节点以Node 对象的形式返回
27.
28. alert(li2.nextElementSibling.outerHTML)
29. // nextElementSibling属性返回同一树层级中
30.
31.
32. alert(li2.childElementCount)
33. // 子元素的数量
34.
35. console.log(ul)
36.
37. alert(ul.firstChild.nodeName)
38. alert(ul.lastChild.nodeName)
39. // 返回第一个或最后一个节点
40.
41. alert(ul.firstElementChild.outerHTML)
42. alert(ul.lastElementChild.outerHTML)
43. // 返回第一个或最后一个元素
44.
45. var newli =document.createElement('li')
46. // 创建一个新的标签元素
47. newli.innerText = 'PHP'
48. ul.appendChild(newli)
49. // 拼接子元素 添加到最后一个子节点之后
50.
51. var removed = ul.removeChild(ul.firstElementChild)
52. // removeChild 移除子节点
53. ul.appendChild(removed)
54.
55. ul.replaceChild(removed,newli)
56. // 替换子节点
57.
58. ul.insertBefore(removed,ul.firstChild)
59. // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
60. // ul.insertBefore('插入内容','在...节点之前')
61.
62. ul.insertAdjacentText('beforeBegin','外面的外面')
63. // 插入文本
64. // beforeBegin 在...开始之前
65.
66. ul.insertAdjacentHTML('afterBegin','<li>里面的前面</li>')
67. // afterBegin 在...里面的前面
68.
69. ul.insertAdjacentHTML('beforeEnd','<li>里面的后面</li>')
70. // beforeEnd 在...里面的后面
71.
72. ul.insertAdjacentText('afterEnd','外面的后面')
73. // afterEnd 在...外面的后面
74.
75. ul.insertAdjacentElement()
76. // 插入标签元素
77. // ul.insertAdjacentHTML()
78. // 插入代码