Node類型 nodeType以下是一些重要的nodeType的取值：1： 元素element2： 屬性attr3： 文本text8： 註釋comments9： 文檔document nodeName,nodeValue 節點關係 childNodes: 每個節點都有一個childNodes屬性，其 ...
Node類型
nodeType
以下是一些重要的nodeType的取值：
1： 元素element
2： 屬性attr
3： 文本text
8： 註釋comments
9： 文檔document
nodeName,nodeValue
節點關係
childNodes: 每個節點都有一個childNodes屬性，其中保存著一個NodeList對象
firstChild: 等同於childNodes[0]
lastChild: 等同於childNodes.length-1
同時通過使用列表中每個節點的previousSibling和nextSibling屬性，可以訪問同一列表中的其他節點。
操作節點
appendChild()
appendChild()方法用於向childNodes列表的末尾添加一個節點。添加節點後，childNodes的新增節點、父節點及以前的最後一個子節點的關係指針都會相應地得到更新。
insertBefore()
insertBefore()這個方法接受兩個參數：要插入的節點和作為參照的節點。
// 插入後成為最後一個子節點 returnedNode = someNode.insertBefore(newNode,null); // 插入後成為第一個節點 returnedNode = someNode.insertBefore(newNode,someNode.firstChild); // 插入到最後一個子節點前面 returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
repaceChild()
repaceChild()接受兩個參數，要插入的節點和要替換的節點
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
removeChild()
只移除而非替換節點。
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
var deepList = myList.cloneNode(true); console.log(deepList.length); // 3 var shallowList = myList.cloneNode(false); console.log(shallowList.childNodes.length); //0
Document類型
Document節點具有下列特征：
nodeType的值為9；
nodeName的值為#document;
nodeValue的值為null;
parentNode的值為null;
ownerDocument的值為null;
文檔的子節點
var html = document.documentElement; // 取得對<html>的引用 console.log(html === document.childNodes[0]); // true console.log(html === document.firstChild); // true
文檔信息
// 取得文檔的標題 var originalTitle = document.title; // 設置文檔標題 document.title = "New page title"; // 取得完整的url var url = document.URL; // 取得功能變數名稱 var domain = document.domain; // 取得來源頁面的url var referrer = document.referrer; //假設頁面來自p2p.wrox.com域 document.domain = "wrox.com"; // 成功 document.domain = "nczonline.net"; // 失敗
在IE7中調用document.getElementById("myElement");結果會返回<input>元素，如下所示；
最好的辦法是不讓表單欄位的name特性與其他元素的ID相同。
<input type="text" name="myElement" value="text field"> <div id="myElement">a div</div>
特殊集合
document.anchors,包含文檔中所有帶name特性的a元素;
document.forms, 包含文檔中所有form元素，與document.getElementsByTagName("form")得到的結果相同;
document.images,包含文檔中所有的img元素，與document.getElementsByTagName("img")得到的結果相同;
document.links，包含文檔中所有帶href特性的a元素;
文檔寫入
<html> <head> <title>document.write() Example 3</title> </head> <body> <script type="text/javascript"> document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>"); </script> </body> </html>
字元串<\/script>不會被當作外部script標簽的關閉標簽，因而頁面中也就不會出現多餘的內容了。
Element類型
Element節點具有以下特征：
nodeType的值為1;
nodeName的值為元素的標簽名;
nodeValue的值為null;
parentNode可能是Document或Element;
要訪問元素的標簽名，可以使用nodeName屬性，也可以使用tagName屬性；
<div id="myDiv"></div> var div = document.getElementById("myDiv"); console.log(div.tagName); // DIV console.log(div.nodeName); // DIV if (element.tagName=="div") { // 不能這樣比較，很容易出錯 } if (element.tagName.toLowerCase =="div") { // 這樣最好（適用於任何文檔） }
取得特性
操作特性的DOM方法主要有三個，分別是getAttribute()、setAttribute()、removeAttribute()；
註意，傳遞給getAttribute()的特性名與實際的特性名相同。印象要想得到class的特性值，應該傳入"class"而不是"className"。
var div = document.getElementById("myDiv"); console.log(div.getAttribute("class")); // bd
創建元素
使用document.createElement()方法可以創建新元素。
元素的子節點
在執行某項操作以前，通常都要先檢查一下nodeType屬性，如下麵的例子所示:
for (var i=0; len = element.childNodes.length; i<len; i++){ if (element.childNodes[i].nodeType ==1) { // 執行某些操作 } }
Text類型
Text節點具有以下特征：
nodeType的值為3；
nodeName的值為"#text";
nodeValue的值為節點所包含的文本；
parentNode是一個Element；
創建文本節點
可以使用document.createTextNode()創建新文本節點。
規範化文本節點
normalize()
分割文本節點
splitText()
Comment類型
comment節點具有下列特征：
nodeType的值為8;
nodeName的值為"#comment";
nodeValue的值是註釋的內容；
parentNode可能是Document或Element；
不支持（沒有）子幾點；
DOM操作技術
操作表格
// 創建 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; // 創建tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); // 創建第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1")); // 創建第二行 tbody.insertRow(01); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2")); document.body.appendChild(table);
