DOM節點 :
DOM 節點的屬性主要有：
nodeName 報告節點的名稱（詳見下述）。 nodeValue 提供節點的 “值”（詳見後述）。 parentNode 返回節點的父節點。記住，每個元素、屬性和文本都有一個父節點。 childNodes 是節點的孩子節點列表。對於 HTML，該列表僅對元素有意義，文本節點和屬性節點都沒有孩子。 firstChild 僅僅是 childNodes 列表中第一個節點的捷徑。 lastChild 是另一種捷徑，表示 childNodes 列表中的最後一個節點。 previousSibling 返回當前節點之前 的節點。換句話說，它返回當前節點的父節點的 childNodes 列表中位於該節點前面的那個節點（如果感到迷惑，重新讀前面一句）。 nextSibling 類似於 previousSibling 屬性，返回父節點的 childNodes 列表中的下一個節點。 attributes 僅用於元素節點，返回元素的屬性列表。 接下來看看所有節點都具有的方法（與節點屬性一樣，我省略了實際上不適用於多數 HTML DOM 操作的少數方法）：
insertBefore(newChild, referenceNode) 將 newChild 節點插入到 referenceNode 之前。記住，應該對 newChild 的目標父節點調用該方法。 replaceChild(newChild, oldChild) 用 newChild 節點替換 oldChild 節點。 removeChild(oldChild) 從運行該方法的節點中刪除 oldChild 節點。 appendChild(newChild) 將 newChild 添加到運行該函數的節點之中。newChild 被添加到目標節點孩子列表中的末端。 hasChildNodes() 在調用該方法的節點有孩子時則返回 true，否則返回 false。 hasAttributes() 在調用該方法的節點有屬性時則返回 true，否則返回 false。 多數 Web 應用程式中只用到四種節點類型：
a 或 img。 href（a 元素）或 src（img 元素）。 p、a 或 h2 這些元素中的文字。 基本上所有基於 DOM 的代碼中都要用到的第一個節點類型是文檔節點。文檔節點 實際上並不是 HTML（或 XML）頁面中的一個元素而是頁面本身。因此在 HTML Web 頁面中，文檔節點就是整個 DOM 樹。在 JavaScript 中，可以使用關鍵字 document 訪問文檔節點：
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
可使用 document 對象建立新節點，如下所示：
createElement(elementName) 使用給定的名稱建立一個元素。 createTextNode(text) 使用提供的文本建立一個新的文本節點。 createAttribute(attributeName) 用提供的名稱建立一個新屬性。 這裡的關鍵在於這些方法建立節點，但是並沒有將其附加或者插入到特定的文檔中。因此，必須使用前面所述的方法如 insertBefore() 或 appendChild() 來完成這一步。因此，可使用下面的代碼建立新元素並將其添加到文檔中：
var pElement = myDocument.createElement("p");var text = myDocument.createTextNode("Here's some text in a p element.");pElement.appendChild(text);bodyElement.appendChild(pElement); |
元素節點：
元素只有兩組專有的方法：
getAttribute(name) 返回名為 name 的屬性值。 removeAttribute(name) 刪除名為 name 的屬性。 setAttribute(name, value) 建立一個名為 name 的屬性並將其值設為 value。 getAttributeNode(name) 返回名為 name 的屬性節點。 removeAttributeNode(node) 刪除與指定節點匹配的屬性節點。 getElementsByTagName(elementName) 返回具有指定名稱的元素節點列表。 處理屬性：
var imgElement = document.createElement("img");imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");imgElement.setAttribute("width", "130");imgElement.setAttribute("height", "150");bodyElement.appendChild(imgElement);
尋找嵌套元素：
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
也可以使用 getElementsByTagName() 完成類似的功能：
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
bodyElement.removeChild(imgElement);
}
屬性節點：
getAttribute(name) 返回名為 name 的屬性值。 removeAttribute(name) 刪除名為 name 的屬性。 setAttribute(name, value) 建立一個名為 name 的屬性並將其值設為 value。文本節點：
var pElements = bodyElement.getElementsByTagName("p");for (i=0; i<pElements.length; i++) { var pElement = pElements.item(i); var text = pElement.firstChild.nodeValue; alert(text);}說明：在javascript中，我們為了獲得title的標籤和文本，一般需要這樣做
var title =dom.getElementsByTagName(”title”);
alert(title[0].nodeName);//得到“title”
alert(title[0].nodeValue)的時候，FF只能獲得#text，而IE只能得到null
後來查了很多資料，object text類型或者object element，本身也是一個結點
上例中“標題”不是一個簡單的常值內容，而是一個文本結點
它也有自己的nodeName，所以應該寫成：
alert(title[0].firstChild.nodeValue);//得到“標題”
少數其他幾種方法是專門用於文本節點的。這些方法用於增加或分解節點中的資料：
appendData(text) 將提供的文本追加到文本節點的已有內容之後。 insertData(position, text) 允許在文本節點的中間插入資料。在指定的位置插入提供的文本。 replaceData(position, length, text) 從指定位置開始刪除指定長度的字元，用提供的文本代替刪除的文本。 什麼節點類型？
到目前為止看到的多數代碼都假設已經知道處理的節點是什麼類型，但情況並非總是如此。比方說，如果在 DOM 樹中導航並處理一般的節點類型，可能就不知道您遇到了元素還是文本。也許獲得了 p 元素的所有孩子，但是不能確定處理的是文本、b 元素還是 img 元素。這種情況下，在進一步的處理之前需要確定是什麼類型的節點。
所幸的是很容易就能做到。DOM 節點類型定義了一些常量，比如：
Node.ELEMENT_NODE 是表示元素節點類型的常量。 Node.ATTRIBUTE_NODE 是表示屬性節點類型的常量。 Node.TEXT_NODE 是表示文本節點類型的常量。 Node.DOCUMENT_NODE 是表示文檔節點類型的常量。 還有其他一些節點類型，但是對於 HTML 除了這四種以外很少用到。我有意沒有給出這些常量的值，雖然 DOM 規範中定義了這些值，永遠不要直接使用那些值，因為這正是常量的目的！
nodeType 屬性
可使用 nodeType 屬性比較節點和上述常量 —— 該屬性定義在 DOM node 類型上因此可用於所有節點，如下所示：
var someNode = document.documentElement.firstChild;if (someNode.nodeType == Node.ELEMENT_NODE) { alert("We've found an element node named " + someNode.nodeName);} else if (someNode.nodeType == Node.TEXT_NODE) { alert("It's a text node; the text is " + someNode.nodeValue);} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) { alert("It's an attribute named " + someNode.nodeName + " with a value of '" + someNode.nodeValue + "'");}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
