HTML文档中一切都是节点！
整个文档是文档节点；
注释是注释节点；
每一个HTML元素都是一个元素节点；
元素内的文本内容是文本节点；
连元素的每一个属性都是一个属性节点。
看到这些是不是感觉很熟悉，没错，就像JS中一切都是对象一样，HTML文档中一切都是节点。
我们可以使用各种访问节点的方法，对任意一个节点进行增删改查等等操作。从而达到对整个页面的各种操作。
增：
如果要向HTML添加一个元素，需要先创建一个元素(元素节点)，然后再将其追加到已有的元素上。
创建元素节点newNode：
var newNode = document.createElement(String tagName)
创建元素内的文本节点：
var textNode = document.createTextNode(String data)
把文本节点textNode添加到新建的元素节点newNode上：
newNode.appendChild(textNode)
把新建的元素节点newNode添加到已存在的元素节oldNode点末尾：
oldNode.appendChild(newNode)
或者把新建的元素节点newNode添加到已存在的元素节点oldNode的某个子节点childNode前：
oldNode.insertBefore(newNode,childNode)
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("这是新添加的元素节点!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 } 16 </script> 17 <style type="text/css"> 18 ul { 19 border: 1px solid ; 20 margin: 100px auto; 21 400px; 22 list-style-type: none; 23 } 24 </style> 25 <title>JS</title> 26 </head> 27 <body> 28 <ul id="ul"> 29 <li><h1>这是第一行！</h1></li> 30 <li><h1>这是第二行！</h1></li> 31 </ul> 32 </body> 33 </html>
效果：
删：
查找到将要删除的节点removeNode和该节点的父节点parentNode后
parentNode.removeChild(removeNode)
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("这是新添加的元素节点!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 16 var li1 = document.getElementById("li1"); 17 ull.removeChild(li1); 18 } 19 </script> 20 <style type="text/css"> 21 ul { 22 border: 1px solid ; 23 margin: 100px auto; 24 400px; 25 list-style-type: none; 26 } 27 </style> 28 <title>JS</title> 29 </head> 30 <body> 31 <ul id="ul"> 32 <li id="li1"><h1>这是第一行！</h1></li> 33 <li><h1>这是第二行！</h1></li> 34 </ul> 35 </body> 36 </html>
效果：
改：
查找到某个需要改动的元素节点node，然后对其文本、样式等进行改动
改动其样式：
node.style.color="red"
改动其文本：
node.innerHTML="string"
实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("这是新添加的元素节点!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 16 var li1 = document.getElementById("li1"); 17 ull.removeChild(li1); 18 19 var li2 = document.getElementById("li2"); 20 li2.style.color="red"; 21 li2.innerHTML="改变了颜色和文本的第二行！" 22 } 23 </script> 24 <style type="text/css"> 25 ul { 26 border: 1px solid ; 27 margin: 100px auto; 28 400px; 29 list-style-type: none; 30 } 31 </style> 32 <title>JS</title> 33 </head> 34 <body> 35 <ul id="ul"> 36 <li id="li1"><h1>这是第一行！</h1></li> 37 <li id="li2"><h1>这是第二行！</h1></li> 38 </ul> 39 </body> 40 </html>
效果：
查:
我们除了应用getElementById()、getElementsByTagName()和getElementClassName()来获取特定的元素节点之余，我们还可以用getAttribute(String attribute) 来获取特定元素节点的某一个属性的值，并通过setAttribute(attrName,attrValue)来改变该属性的值。
实例：
1 <script type="text/javascript"> 2 window.onload = function(){ 3 var pp = document.createElement("li"); 4 var hh1 = document.createElement("h1"); 5 var ttext = document.createTextNode("这是新添加的元素节点!"); 6 pp.appendChild(hh1); 7 hh1.appendChild(ttext); 8 var ull = document.getElementById("ul"); 9 ull.appendChild(pp); 10 11 var li1 = document.getElementById("li1"); 12 ull.removeChild(li1); 13 14 var li2 = document.getElementById("li2"); 15 li2.style.color="red"; 16 li2.innerHTML="改变了颜色和文本的第二行！" 17 18 alert(li2.getAttribute("style"));19 } 20 </script>
效果：
除此之外，我们还可以通过某个节点的nodeName、nodeType和nodeValue获取节点的更多信息：
nodeName属性规定节点的名称:
-
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性规定节点的值:
-
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeValue 属性规定节点的值:
-
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值