【原文】http://www.zj-blog.com/html/2007/04/200704101145040237.htm
Node往往被翻譯為節點，在一個對象（可以簡單的理解為是HTML頁面中），一個屬性name="aaa"可以是一個節點，一個< div id="aaa">……< /div>也可以是一個節點，在< body>……< /body>中的，也是一個大大的節點。下面是一些有關Node的屬性和方法，並沒有包含部分不相容IE和FF內容的講解。
Node的屬性介紹：
nodeType：顯示節點的類型
nodeName：顯示節點的名稱
nodeValue：顯示節點的值
attributes：擷取一個屬性節點
firstChild：表示某一節點的第一個節點
lastChild：表示某一節點的最後一個子節點
childNodes：表示所在節點的所有子節點
parentNode：表示所在節點的父節點
nextSibling：緊挨著當前節點的下一個節點
previousSibling：緊挨著當前節點的上一個節點
ownerDocument：（不知）
Node有各種各樣的節點，我們先花一些時間認識他們，同時一併瞭解nodeType，nodeName和nodeValue屬性：
名稱：元素節點
nodeType：ELEMENT_NODE
nodeType值：1
nodeName：元素標記名
nodeValue：null
<body>
<div id = "t" ><span></span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//顯示 1 DIV null
</script>
名稱：屬性節點
nodeType：ATTRIBUTE_NODE
nodeType值：2
nodeName：屬性名稱
nodeValue：屬性值
<body>
<div id = "t" name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//顯示 2 name aaa
</script>
名稱：文本節點
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：常值內容
<body>
<div id = "t">bbb</div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//顯示 3 #text bbb
</script>
名稱：CDATA文本節點（XML中傳遞文本的格式）
nodeType：CDATA_SECTION_NODE
nodeType值：4
nodeName：#cdata-section
nodeValue：CDATA常值內容
（作者省略8個屬性，需技術補充）
attributes屬性，直接擷取一個屬性節點，注意這裡要使用[]，保持IE和FF的相容性。
<body name="ddd">
<div id = "t" name ="aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//顯示 name aaa
</script>
firstChild和lastChild屬性，表示某一節點的第一個和最後一個子節點：
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//顯示 aaa ccc
</script>
childNodes和parentNode屬性，表示所在節點的所有子節點和所在節點的父節點，這裡的childNodes注意是一個數組：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//顯示 bbb ddd
</script>
nextSibling和previousSibling屬性，分別表示在parentNode的childNodes[]數組中，緊挨著當前節點的上一個和下一個節點：
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//顯示 ccc aaa
</script>
ownerDocument屬性（不知如何使用）
Node的方法介紹：
hasChildNodes()：判定一個節點是否有子節點
removeChild()：去除一個節點
appendChild()：添加一個節點
replaceChild()：替換一個節點
insertBefore()：指定節點位置插入一個節點
cloneNode()：複製一個節點
normalize()：（不知）
hasChildNodes()方法：判定一個節點是否有子節點，有返回true，沒有返回false
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
<div id = "m"></div>
</body>
<script>
alert(document.getElementById("t").hasChildNodes());
alert(document.getElementById("m").hasChildNodes());
// 第一個true，第二個false
</script>
removeChild()方法：去除一個節點
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa</span>被去除
</script>
appendChild()方法：添加一個節點，如果文檔樹中已經存在該節點，則將它刪除，然後在新位置插入。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa</span>成了最後一個節點
</script>
replaceChild()方法：從文檔樹中刪除（並返回）指定的子節點，用另一個節點來替換它。
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最後一項成了 eee
</script>
insertBefore()方法：在指定節點的前面插入一個節點，如果已經存在，則刪除原來的，然後在新位置插入
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最後一項的前面多了一項 eee
</script>
cloneNode()方法：複製一個節點，該方法有一個參數，true表示同時複製所有的子節點，false表示近複製當前節點
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id ="m"></div>
</body>
<script>
var what = document.getElementById("t").cloneNode(false).innerHTML;
document.getElementById("m").innerHTML = what;
// 增加了一個aaabbbccc
</script>
