javascript快速入門15--節點 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# javascript快速入門15--節點 ## 節點類型 DOM定義了Node的接口以及許多種節點類型來表示節點的多個方面! * Document——最頂層的節點，所有的其他節點都是附屬于它的。 * DocumentType——DTD引用（使用<!DOCTYPE >語法）的對象表現形式，例如<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >。它不能包含子節點。 * DocumentFragment——可以像Document一樣來保存其他節點。 * Element——表示起始標簽和結束標簽之間的內容，例如<tag ></tag >或者<tag / >。這是唯一可以同時包含特性和子節點的節點類型。 * Attr——代表一對特性名和特性值。這個節點類型不能包含子節點。 * Text——代表XML文檔中的在起始標簽和結束標簽之間，或者CData Section內包含的普通文本。這個節點類型不能包含子節點。 * CDataSection——<![CDATA[ ]]>的對象表現形式。這個節點類型僅能包含文本節點Text作為子節點。 * Entity——表示在DTD中的一個實體定義，例如<!ENTITY foo "foo">。這個節點類型不能包含子節點。 * EntityReference——代表一個實體引用，例如"。這個節點類型不能包含子節點。 * ProcessingInstruction——代表一個PI(處理指令)。這個節點類型不能包含子節點。 * Comment——代表注釋。這個節點類型不能包含子節點。 * Notation——代表在DTD中定義的記號。這個很少用到，所以我們不會討論。還定義了對應不同節點類型的12個常量. * Node.ELEMENT_NODE (1) * Node.ATTRIBUTE_NODE (2) * Node.TEXT_NODE (3) * Node.CDATA_SECTION_NODE (4) * Node.ENTITY_REFERENCE_NODE (5) * Node.ENTITY_NODE (6) * Node.PROCESSING_INSTRUCTION_NODE (7) * Node.COMMENT_NODE (8) * Node.DOCUMENT_NODE (9) * Node.DOCUMENT_TYPE_NODE (10) * Node.DOCUMENT_FRAGMENT_NODE (11) * Node.NOTATION_NODE (12) **節點類型常量都是Node對象的屬性，但是IE不支持Node對象,但是仍可以使用數值** Node接口也定義了一些所有節點類型都包含的特性和方法。我們在下面的表格中列出了這些特性和方法： | 特性/方法 | 類型/返回類型 | 說明 | | --- | --- | | nodeName | String | 節點的名字；根據節點的類型而定義,元素節點返回tagName，文本節點返回#text,屬性節點返回屬性名 | | nodeValue | String | 節點的值；根據節點的類型而定義.元素節點此屬性為空，文本節點些屬性即為節點中的字符串，屬性節點返回屬性值 | | nodeType | Number | 節點的類型常量值之一 | | ownerDocument | Document | 指向這個節點所屬的文檔 | | firstChild | Node | 指向在childNodes列表中的第一個節點 | | lastChild | Node | 指向在childNodes列表中的最后一個節點 | | childNodes | NodeList | 所有子節點的列表 | | previousSibling | Node | 指向前一個兄弟節點；如果這個節點就是第一個兄弟節點，那么該值為null | | nextSibling | Node | 指向后一個兄弟節點；如果這個節點就是最后一個兄弟節點，那么該值為null | | hasChildNodes() | Boolean | 當childNodes包含一個或多個節點時，返回真 | | attributes | NamedNodeMap | 包含了代表一個元素的特性的Attr對象；僅用于Element節點 | | appendChild(_node_) | Node | 將_node_添加到childNodes的末尾 | | removeChild(_node_) | Node | 從childNodes中刪除_node_ | | replaceChild (_newnode_,_oldnode_) | Node | 將childNodes中的_oldnode_替換成_newnode_ | | insertBefore (_newnode_,_refnode_) | Node | 在childNodes中的_refnode_之前插入_newnode_ | 除節點外，DOM還定義了一些助手對象，它們可以和節點一起使用，但不是DOM文檔必有的部分。 * NodeList——節點數組，按照數值進行索引；用來表示一個元素的子節點。比如childNodes。NodeList有個length屬性表示節點數量 * NamedNodeMap——同時用數值和名字進行索引的節點表；用于表示元素特性。比如元素的attributes。NamedNodeMap對象也有一個length屬性來指示它所包含的節點的數量。這些助手對象為處理DOM文檔提供附加的訪問和遍歷方法。 ## 屬性節點正如前面提到的，即便Node接口已具有attributes方法，且已被所有類型的節點繼承，然而，只有Element節點才能有特性。Element節點的attributes屬性其實是NamedNodeMap，它提供一些用于訪問和處理其內容的方法： * getNamedItem(name)——返回nodeName屬性值等于name的節點； * removeNamedItem(name)——刪除nodeName屬性值等于name的節點； * setNamedItem(node)——將node添加到列表中，按其nodeName屬性進行索引； * item(pos)——像NodeList一樣，返回在位置pos的節點； **請記住這些方法都是返回一個Attr節點，而非特性值。** 當NamedNodeMap用于表示特性時，其中每個節點都是Attr節點，它的nodeName屬性被設置為特性名稱，而nodeValue屬性被設置為特性的值。示例： ``` <p id="p1" style="background-color:red;" title="P!!!">Some Text!</p> var p1 = document.getElementById("p1"); //訪問ID屬性 alert(p1.attributes.getNamedItem("id")).nodeValue; //也可以用數值來訪問ID屬性 alert(p1.attributes.item(0)).nodeValue; //也可以改變它的值 p1.attributes.getNamedItem("id").nodeValue = "newP1"; ``` Attr節點也有一個完全等同于（同時也完全同步于）nodeValue屬性的value屬性，并且有name屬性和nodeName屬性保持同步。我們可以隨意使用這些屬性來修改或變更特性。但這些方法都比較復雜，所以DOM又定義了三個元素方法來幫助訪問特性： * getAttribute(name)——等于attributes.getNamedItem(name).value * setAttribute(name, newValue)——等于attribute.getNamedItem(name).value = newValue * removeAttribute(name)——等于attributes.removeNamedItem(name) ### NodeList 事實上我們早接觸過NodeList了 ``` var allTags = document.getElementsByTagName("*"); alert(allTags.item(1).tagName);//訪問了第二個元素 alert(allTags[0]);//在JavaScript可以這樣訪問第一個元素，但這只能是JavaScript里正常運行 ``` getElementsByTagName與getElementsByName都返回NodeList，可以使用item(index)方法訪問其中的內容，在JavaScript中還可使用數組形式的下標訪問！ ## 創建和操縱節點迄今為止，已經學過了如何訪問文檔中的不同節點，不過這僅僅是使用DOM所能實現的功能中的很小一部分。還能添加、刪除、替換（或者其他操作）DOM文檔中的節點。正是這些功能使得DOM具有真正意義上的動態性。 ### 創建新節點 DOM Document（文檔）中有一些方法用于創建不同類型的節點，即便在所有的瀏覽器中的瀏覽器document對象并不需要全部支持所有的方法。下面的表格列出了包含在DOM Level 1中的方法，并列出不同的瀏覽器是否支持項。 | 方法 | 描述 | IE | MOZ | OP | SAF | | --- | --- | | createAttribute (_name_) | 用給定名稱_name_創建特性節點 | × | × | × | － | | createCDATASection (_text_) | 用包含文本_text_的文本子節點創建一個CDATA Section | － | × | － | － | | createComment(_text_) | 創建包含文本_text_的注釋節點 | × | × | × | × | | createDocumentFragment() | 創建文檔碎片節點 | × | × | × | × | | createElement (_tagname_) | 創建標簽名為_tagname_的元素 | × | × | × | × | | createEntity Reference(_name_) | 創建給定名稱的實體引用節點 | － | × | － | － | | createProcessing Instruction(_target_, _data_) | 創建包含給定_target_和_data_的PI節點 | － | × | － | － | | createTextNode(_text_) | 創建包含文本_text_的文本節點 | × | × | × | × | 注：IE = Windows的IE 6；MOZ = 任意平臺的Mozilla 1.5；OP=任意平臺的Opera 7.5；SAF=MacOS的Safari 1.2 最常用到的幾個方法是：createDocumentFragment()、createElement()和createText- Node()；其他的一些方法要么就是沒什么用（createComment()），要么就是瀏覽器的支持不夠，目前還不太能用。動態創建一個段落示例 ``` var p = document.createElement("p");//創建一個元素節點，傳入標簽名 var txt = document.createTextNode("創建文本節點,傳參數即是文本內容"); p.appendChild(txt);//將txt所引用的文本節點插入p到p的最后面(在這里p是空的) //直到現在，頁面不會出現任何內容，必須將創建的節點插入到文檔中 document.body.appendChild(p);//p將出現在最后 ``` 移動，刪除節點方法及注意事項——appendChild,removeChild,replaceChild,insertBefore ``` var p1 = document.getElementById("p1"); document.body.appendChild(p1);//p1將會被作為body的最后一個子節點，然而頁面上仍只有一個p p1.parentNode.removeChild(p1);//removeChild必須是要刪除的節點的父節點調用 //p1將會從頁面上消失，然而它并沒有完全消失，我們還可以再將其插入文檔 document.body.appendChild(p1);//因為變量p1包含了節點的引用 var p2 = document.getElementById("p2"); p2.parentNode.replaceChild(p1,p2);//p2將會被替換成p1，p2將消失 //而p1將從原來的位置移到p2的位置 ``` ### 克隆節點——cloneNode 基于上面的原因，DOM為我們提供了一個克隆節點的方法用于生成一個節點的副本 ``` var p1 = document.getElementById("p1"); var p2 = p1.cloneNode(); document.body.appendChild(p2);//頁面上將會多出一個段落,不過段落中什么都沒有 p2 = p1.cloneNode(true);//使用參數true表示克隆節點時包含子節點 document.body.appendChild(p2); ```