《JS高程(3)》DOM節點層次DocumentType類型-第10章筆記(16)

DocumentType類型

DocumentType類型在Web瀏覽器中並不常用,僅有Firefox、Safari、Opera、Chrome4.0支持它。
DocumentType包含着與文檔的doctype有關的所有信息,特徵:

- -
nodeType的值: 10
nodeName的值: doctype
nodeValue的值: null
parentNode爲: Document
子節點

在DOM1級中,DocumentType對象不能動態地創建,只能通過解析文檔代碼的方式來創建。支持它的瀏覽器會把DocumentType對象保存在document.doctype中,DocumentType中有三個屬性:name、entities 、notations.
name:表示文檔的名稱;
entities :文檔類型描述的實體的NameNodeMap對象;
notations:文檔類型描述的符號的NameNodeMap對象。
通常,瀏覽器中的文檔使用的都是HTML或XHTML文檔類型,因而entities和notation都是空列表。

<!DICTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
DocumentType的name屬性中保存的就是"HTML":
alert(document.doctype.name); //'HTML'

DocumentFragment類型

在所有節點類型中,只有DocumentFragment在文檔中沒有對應的標記。DOM規定文檔片段(document fragment)是一種“輕量級”的文檔,可以包含和控制節點,但不會像完整的文檔那樣佔用額外的資源。
特徵:

- -
nodeType的值: 11
nodeName的值: “#document fragment”
nodeValue的值: null
parentNode的值: null
子節點 Element、ProcessingInstruction、Comment、Text、CDATASection、EntityReference

文檔片段繼承了Node的所有方法,通常用於執行那些針對文檔的DOM操作。如果將文檔中的節點添加到文檔片段中,就會從文檔樹中移除該節點,也不會從瀏覽器中在看到該節點。添加到文檔片段中的新節點同樣也不屬於文檔樹。可以通過appendChild()或insertBefore()將文檔片段中內容添加到文檔中。再將文檔片段作爲參數傳遞給這兩個方式時,實際上只會將文檔片段的所有子節點添加到相應位置上,文檔片段本身永遠不會成爲文檔樹的一部分。

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);

先去的對< ul>元素的引用,通過for循環創建3個列表項,並且通過文本表示他們的順序,需要分別創建< li>元素、創建文本節點,再把文本節點添加到< li>元素。
接着使用appendChild()將< li>元素添加到文檔片段中,結束後在調用appendChild()並傳入文檔片段,將所有列表項添加到< ul>元素中。此時,文檔片段的所有子節點都被刪除並轉移到了< ul>元素中。

Attr類型

元素的特性在DOM中以Attr類型來表示。

在所有瀏覽器中,都可訪問Attr類型的構造函數和原型。

從技術角度講,特性就是存在於元素的attributes屬性中的節點。
特性節點特徵:

- -
nodeType的值: 11
nodeName的值: 特性的名稱
nodeValue的值: 特性的值
parentNode的值: null
html中的子節點
xml中的子節點 Text、EntityReference

儘管也是節點,但特性卻不被認爲是DOM文檔樹的一部分,最常使用的是getAttribute()、setAttribute()、removeArrribute()方法,很少直接引用特性節點。

Attr對象有3個屬性:name、value和specified.
name : 特性名稱(與nodeName的值相同);
value:特性的值(與nodeValue的值相同);
specified:布爾值,用以區別特性是在代碼中指定的,還是默認的。

document.createAttribute()並傳入特性的名稱可以創建新的特性節點。
例:爲元素添加align特性

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"
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章