《Javascript 高階程式設計(第三版)》筆記0x10 節點：Element、Text、Comment等
目錄
Element型別
Element 節點具有以下特徵：
nodeType 的值為 1；
nodeName 的值為元素的標籤名；
nodeValue 的值為 null；
parentNode 可能是 Document 或 Element；
其子節點可能是 Element、 Text、 Comment、 ProcessingInstruction、 CDATASection 或EntityReference。
<div id="myDiv"></div>
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true
在 HTML 中，標籤名始終都以全部大寫表示；而在 XML（有時候也包括 XHTML）中，標籤名則始終會與原始碼中的保持一致。
if (element.tagName == "div"){ //不能這樣比較，很容易出錯！ //在此執行某些操作 } if (element.tagName.toLowerCase() == "div"){ //這樣最好（適用於任何文件） //在此執行某些操作 }
HTML 元素
HTMLElement 型別直接繼承自 Element 並添加了一些屬性。新增的這些屬性分別對應於每個 HTML元素中都存在的下列標準特性。
id，元素在文件中的唯一識別符號。
title，有關元素的附加說明資訊，一般通過工具提示條顯示出來。
lang，元素內容的語言程式碼，很少使用。
dir，語言的方向，值為"ltr"（left-to-right，從左至右）或"rtl"（right-to-left，從右至左），也很少使用。
className，與元素的 class 特性對應，即為元素指定的 CSS 類。沒有將這個屬性命名為 class，是因為 class 是 ECMAScript 的保留字
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"取得特性
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"設定特性
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");
div.removeAttribute("class");attributes 屬性
Element 型別是使用 attributes 屬性的唯一一個 DOM 節點型別。attributes 屬性中包含一個NamedNodeMap，與 NodeList 類似，也是一個“動態”的集合。元素的每一個特性都由一個 Attr 節點表示，每個節點都儲存在 NamedNodeMap 物件中。 NamedNodeMap 物件擁有下列方法。
getNamedItem(name)：返回 nodeName 屬性等於 name 的節點；
removeNamedItem(name)：從列表中移除 nodeName 屬性等於 name 的節點；
setNamedItem(node)：向列表中新增節點，以節點的 nodeName 屬性為索引；
item(pos)：返回位於數字 pos 位置處的節點。
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";
var oldAttr = element.attributes.removeNamedItem("id");
element.attributes.setNamedItem(newAttr);建立元素
var div = document.createElement("div");//建立
document.body.appendChild(div);//新增
if (client.browser.ie && client.browser.ie <=7){
//建立一個帶 name 特性的 iframe 元素
var iframe = document.createElement("<iframe name=\"myframe\"></iframe>");
//建立 input 元素
var input = document.createElement("<input type=\"checkbox\">");
//建立 button 元素
var button = document.createElement("<button type=\"reset\"></button>");
//建立單選按鈕
var radio1 = document.createElement("<input type=\"radio\" name=\"choice\" "＋"value=\"1\">");
var radio2 = document.createElement("<input type=\"radio\" name=\"choice\" "＋"value=\"2\">");
}
元素的子節點
Text型別
文字節點由 Text 型別表示，包含的是可以照字面解釋的純文字內容。純文字中可以包含轉義後的HTML 字元，但不能包含 HTML 程式碼。 Text 節點具有以下特徵：
nodeType 的值為 3；
nodeName 的值為"#text"；
nodeValue 的值為節點所包含的文字；
parentNode 是一個 Element；
不支援（沒有）子節點。
可以通過 nodeValue 屬性或 data 屬性訪問 Text 節點中包含的文字，這兩個屬性中包含的值相同。對 nodeValue 的修改也會通過 data 反映出來，反之亦然。使用下列方法可以操作節點中的文字。
appendData(text)：將 text 新增到節點的末尾。
deleteData(offset, count)：從 offset 指定的位置開始刪除 count 個字元。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替換從 offset 指定的位置開始到 offset+count 為止處的文字。
splitText(offset)：從 offset 指定的位置將當前文字節點分成兩個文字節點。
substringData(offset, count)：提取從 offset 指定的位置開始到 offset+count 為止處的字串。
<!-- 沒有內容，也就沒有文字節點 -->
<div></div>
<!-- 有空格，因而有一個文字節點 -->
<div> </div>
<!-- 有內容，因而有一個文字節點 -->
<div>Hello World!</div>var textNode = div.firstChild; //或者 div.childNodes[0]
div.firstChild.nodeValue = "Some other message";
//輸出結果是"Some <strong>other</strong> message"
div.firstChild.nodeValue = "Some <strong>other</strong> message";建立文字節點
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);規範化文字節點
如果在一個包含兩個或多個文字節點的父元素上呼叫 normalize()方法，則會將所有文字節點合併成一個節點，結果節點的 nodeValue 等於將合併前每個文字節點的 nodeValue 值拼接起來的值。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"分割文字節點
splitText()，將一個文字節點分成兩個文字節點，即按照指定的位置分割 nodeValue 值。原來的文字節點將包含從開始到指定位置之前的內容，新文字節點將包含剩下的文字。返回一個新文字節點，該節點與原節點的parentNode 相同。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2Comment型別
Comment 節點具有下列特徵：
nodeType 的值為 8；
nodeName 的值為"#comment"；
nodeValue 的值是註釋的內容；
parentNode 可能是 Document 或 Element；
不支援（沒有）子節點。
Comment 型別與 Text 型別繼承自相同的基類，因此它擁有除 splitText()之外的所有字串操作方法。與 Text 型別相似，也可以通過 nodeValue 或 data 屬性來取得註釋的內容
<div id="myDiv"><!--A comment --></div>var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"CDATASection型別
CDATASection 型別只針對基於 XML 的文件，表示的是 CDATA 區域。與 Comment 類似，CDATASection 型別繼承自 Text 型別，因此擁有除 splitText()之外的所有字串操作方法。
CDATASection 節點具有下列特徵：
nodeType 的值為 4；
nodeName 的值為"#cdata-section"；
nodeValue 的值是 CDATA 區域中的內容；
parentNode 可能是 Document 或 Element；
不支援（沒有）子節點。
CDATA 區域只會出現在 XML 文件中，因此多數瀏覽器都會把 CDATA 區域錯誤地解析為 Comment或 Element。
<div id="myDiv"><![CDATA[This is some content.]]></div>DocumentType型別
DocumentType 包含著與文件的 doctype 有關的所有資訊，它具有下列特徵：
nodeType 的值為 10；
nodeName 的值為 doctype 的名稱；
nodeValue 的值為 null；
parentNode 是 Document；
不支援（沒有）子節點。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
alert(document.doctype.name); //"HTML"DocumentFragment型別
DOM 規定文件片段（document fragment）是一種“輕量級”的文件，可以包含和控制節點，但不會像完整的文件那樣佔用額外的資源。 DocumentFragment 節點具有下列特徵：
nodeType 的值為 11；
nodeName 的值為"#document-fragment"；
nodeValue 的值為 null；
parentNode 的值為 null；
子節點可以是 Element、 ProcessingInstruction、 Comment、 Text、 CDATASection 或EntityReference。
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);Attr型別
元素的特性在 DOM 中以 Attr 型別來表示。在所有瀏覽器中（包括 IE8），都可以訪問 Attr 型別的建構函式和原型。從技術角度講，特性就是存在於元素的 attributes 屬性中的節點。特性節點具有下列特徵：
在nodeType 的值為 2；
在nodeName 的值是特性的名稱；
在nodeValue 的值是特性的值；
在parentNode 的值為 null；
在在 HTML 中不支援（沒有）子節點；
在 XML 中子節點可以是 Text 或 EntityReference。
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes["align"].value); //"left"
alert(element.getAttributeNode("align").value); //"left"
alert(element.getAttribute("align")); //"left"