以下代碼爲遍歷文檔樹：
<!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的不同之處：
前者會替換當前元素，後者替換當前元素中的內容。