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)
例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
var pp = document.createElement("li");
var hh1 = document.createElement("h1");
var ttext = document.createTextNode("这是新添加的元素节点!");
pp.appendChild(hh1);
hh1.appendChild(ttext);
var ull = document.getElementById("ul");
ull.appendChild(pp);
}
</script>
<style type="text/css">
ul {
border: 1px solid ;
margin: 100px auto;
width: 400px;
list-style-type: none;
}
</style>
<title>JS</title>
</head>
<body>
<ul id="ul">
<li><h1>这是第一行！</h1></li>
<li><h1>这是第二行！</h1></li>
</ul>
</body>
</html>
效果：
删：
查找到将要删除的节点removeNode和该节点的父节点parentNode后
parentNode.removeChild(removeNode)
例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
var pp = document.createElement("li");
var hh1 = document.createElement("h1");
var ttext = document.createTextNode("这是新添加的元素节点!");
pp.appendChild(hh1);
hh1.appendChild(ttext);
var ull = document.getElementById("ul");
ull.appendChild(pp); var li1 = document.getElementById("li1");
ull.removeChild(li1);
}
</script>
<style type="text/css">
ul {
border: 1px solid ;
margin: 100px auto;
width: 400px;
list-style-type: none;
}
</style>
<title>JS</title>
</head>
<body>
<ul id="ul">
<li id="li1"><h1>这是第一行！</h1></li>
<li><h1>这是第二行！</h1></li>
</ul>
</body>
</html>
效果：
改：
查找到某个需要改动的元素节点node，然后对其文本、样式等进行改动
改动其样式：
node.style.color="red"
改动其文本：
node.innerHTML="string"
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script type="text/javascript">
window.onload = function(){
var pp = document.createElement("li");
var hh1 = document.createElement("h1");
var ttext = document.createTextNode("这是新添加的元素节点!");
pp.appendChild(hh1);
hh1.appendChild(ttext);
var ull = document.getElementById("ul");
ull.appendChild(pp); var li1 = document.getElementById("li1");
ull.removeChild(li1); var li2 = document.getElementById("li2");
li2.style.color="red";
li2.innerHTML="改变了颜色和文本的第二行！"
}
</script>
<style type="text/css">
ul {
border: 1px solid ;
margin: 100px auto;
width: 400px;
list-style-type: none;
}
</style>
<title>JS</title>
</head>
<body>
<ul id="ul">
<li id="li1"><h1>这是第一行！</h1></li>
<li id="li2"><h1>这是第二行！</h1></li>
</ul>
</body>
</html>
效果：
查:
我们除了应用getElementById()、getElementsByTagName()和getElementClassName()来获取特定的元素节点之余，我们还可以用getAttribute(String attribute) 来获取特定元素节点的某一个属性的值，并通过setAttribute(attrName,attrValue)来改变该属性的值。
实例：
<script type="text/javascript">
window.onload = function(){
var pp = document.createElement("li");
var hh1 = document.createElement("h1");
var ttext = document.createTextNode("这是新添加的元素节点!");
pp.appendChild(hh1);
hh1.appendChild(ttext);
var ull = document.getElementById("ul");
ull.appendChild(pp); var li1 = document.getElementById("li1");
ull.removeChild(li1); var li2 = document.getElementById("li2");
li2.style.color="red";
li2.innerHTML="改变了颜色和文本的第二行！" alert(li2.getAttribute("style"));19 }
</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 是属性值