HTML DOM学习------深入了解
以下代码为遍历文档树：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
</head>
<!--means-->
<body>
<p>123</p>
</body>
<script type="text/javascript">
var
test = document.getElementsByTagName("html")[0];
console.log(test.nodeName+" "+test.nodeType+" "+test.nodeValue);
console.log(test.firstChild.nodeName+" "+test.firstChild.nodeType+" "+test.firstChild.nodeValue);
console.log(test.lastChild.nodeName+" "+test.lastChild.nodeType+" "+test.lastChild.nodeValue);
var
test1 = test.firstChild.firstChild;
console.log(test1.nodeName+" "+test1.nodeType+" "+test1.nodeValue);
console.log(test1.nextSibling.nodeName+" "+test1.nextSibling.nodeType+" "+test1.nextSibling.nodeValue);
var
test2 = test.firstChild.lastChild;
console.log(test2.nodeName+" "+test2.nodeType+" "+test2.nodeValue);
console.log(test2.previousSibling.nodeName+" "+test2.previousSibling.nodeType+" "+test2.previousSibling.nodeValue);
var
test3 = test.previousSibling;
console.log(test3.nodeName+" "+test3.nodeType+" "+test3.nodeValue);
var
test4 = test.firstChild.nextSibling.nextSibling;
console.log(test4.nodeName+" "+test4.nodeType+" "+test4.nodeValue);
var
test5 = test.lastChild.firstChild;
console.log(test5.nodeName+" "+test5.nodeType+" "+test5.nodeValue);
console.log(test5.nextSibling.nodeName+" "+test5.nextSibling.nodeType+" "+test5.nextSibling.nodeValue);
</script>
</html>
运行结果：
注：在上述文档中，<html>节点的firstChild都是<head>，lastChild都是<body>
如果有<!DOCTYPE html>,那么html的nextSibling是DOCTYPE节点。
注：在上述文档中，<head>节点的firstChild和lastChild不是<title>,
而是一个换行符，是一个文本节点。
如果写作<head><title>123</title></head>，那么head的firstChild和lastChild都是<title>
对于其他标签也一样，所以要注意标签后有换行时，
他的firstChild应该是一个nameValue为'\n'的文本节点。
对于节点的操作：
创建节点：createElement()：创建一个元素
createTextNode()：创建一个文本节点
添加节点：obj.appendChild(newChild)：为某一obj节点添加一个子节点newChild
var
obj = document.getElementsByTagName("p")[0];
var
newChild = document.createElement("strong");
var
newChildTxt = document.createTextNode("new node:<strong>");
newChild.appendChild(newChildTxt);
obj.appendChild(newChild);
扩展：添加多个节点，使用循环
var
textArray = ["new node1\n","new node2\n","new node3\n","new node4\n","new node5\n"];
for(var i=0;i<textArray.length;i++){
var
newChild = document.createElement("pre");
var
newChildTxt = document.createTextNode(textArray[i]);
newChild.appendChild(newChildTxt);
obj.appendChild(newChild);
}
问题：
appendChild()工作机制：每添加一个新的节点，都会刷新页面，这样会是浏览器显得非常缓慢。
解决方案：
使用creatDocmentFragment()方法：创建文件碎片节点。
使用该方法可以只刷新一次界面动态添加多个节点。
示例：
var
textArray = ["new node1\n","new node2\n","new node3\n","new node4\n","new node5\n"];
var
temp = document.createDocumentFragment();
for(var i=0;i<textArray.length;i++){
var
newChild = document.createElement("pre");
var
newChildTxt = document.createTextNode(textArray[i]);
newChild.appendChild(newChildTxt);
temp.appendChild(newChild);
}
obj.appendChild(temp);
插入节点：insertBefore()：在某个节点之前插入一个节点
语法：obj.parentNode.insertBefore(newChild,obj);
示例：
var
obj = document.getElementsByTagName("p")[0];
var
newChild = document.createElement("h1");
var
newChildTxt = document.createTextNode("new node:<h1>");
newChild.appendChild(newChildTxt);
if(obj.parentNode){
obj.parentNode.insertBefore(newChild,obj);
}
复制节点：cloneNode()
深度复制：复制当前节点及其所有子节点。
简单复制：只复制当前节点。
语法：obj.cloneNode(deep);
deep取true，是深度复制，deep取false，是简单复制。
删除节点：removeChild()
语法：obj.removeChild(objChild);(其中被删除的节点应为obj的子节点)
示例：（用hasChildNodes()来判断子节点是否存在）
var
obj = document.getElementById("di");
function removeNode(){
if(obj.hasChildNodes()){
obj.removeChild(obj.lastChild);
}
}
替换节点：replaceChild()
语法：obj.replaceChild(newNode,oldNode);其中obj为oldNode的父节点。
示例：
var
obj = document.getElementsByTagName("p")[0];
var
newNode = document.createElement("h1");
var
newNodeTxt = document.createTextNode("this is a replace node");
newNode.appendChild(newNodeTxt);
obj.parentNode.replaceChild(newNode,obj);
另一种获取网页对象的方法：DHTML对象模型方法。
通过innerHTML，innerText，outerHTML，outerText属性读取和修改HTML元素内容。
注：（innerText，outerHTML，outerText属性，只有IE支持）
innerText只能声明文本内容；
outerHTML和outerText与innerHTML和innerText的不同之处：
前者会替换当前元素，后者替换当前元素中的内容。