javascript快速入門15

橘子悅讀 2013-12-02

展開全文

節(jié)點類型

DOM定義了Node的接口以及許多種節(jié)點類型來表示節(jié)點的多個方面!

Document——最頂層的節(jié)點，所有的其他節(jié)點都是附屬于它的,。
DocumentType——DTD引用（使用<!DOCTYPE >語法）的對象表現(xiàn)形式,，例如<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >。它不能包含子節(jié)點,。
DocumentFragment——可以像Document一樣來保存其他節(jié)點,。
Element——表示起始標簽和結(jié)束標簽之間的內(nèi)容，例如<tag ></tag >或者<tag / >,。這是唯一可以同時包含特性和子節(jié)點的節(jié)點類型,。
Attr——代表一對特性名和特性值。這個節(jié)點類型不能包含子節(jié)點,。
Text——代表XML文檔中的在起始標簽和結(jié)束標簽之間,，或者CData Section內(nèi)包含的普通文本。這個節(jié)點類型不能包含子節(jié)點,。
CDataSection——<![CDATA[ ]]>的對象表現(xiàn)形式,。這個節(jié)點類型僅能包含文本節(jié)點Text作為子節(jié)點。
Entity——表示在DTD中的一個實體定義,，例如<!ENTITY foo "foo">,。這個節(jié)點類型不能包含子節(jié)點。
EntityReference——代表一個實體引用,，例如"。這個節(jié)點類型不能包含子節(jié)點。
ProcessingInstruction——代表一個PI(處理指令),。這個節(jié)點類型不能包含子節(jié)點,。
Comment——代表注釋。這個節(jié)點類型不能包含子節(jié)點,。
Notation——代表在DTD中定義的記號,。這個很少用到，所以我們不會討論,。

還定義了對應(yīng)不同節(jié)點類型的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)

節(jié)點類型常量都是Node對象的屬性,，但是IE不支持Node對象,但是仍可以使用數(shù)值

Node接口也定義了一些所有節(jié)點類型都包含的特性和方法。我們在下面的表格中列出了這些特性和方法：

特性/方法	類型/返回類型	說明
nodeName	String	節(jié)點的名字,；根據(jù)節(jié)點的類型而定義,元素節(jié)點返回tagName,，文本節(jié)點返回#text,屬性節(jié)點返回屬性名
nodeValue	String	節(jié)點的值；根據(jù)節(jié)點的類型而定義.元素節(jié)點此屬性為空,，文本節(jié)點些屬性即為節(jié)點中的字符串,，屬性節(jié)點返回屬性值
nodeType	Number	節(jié)點的類型常量值之一
ownerDocument	Document	指向這個節(jié)點所屬的文檔
firstChild	Node	指向在childNodes列表中的第一個節(jié)點
lastChild	Node	指向在childNodes列表中的最后一個節(jié)點
childNodes	NodeList	所有子節(jié)點的列表
previousSibling	Node	指向前一個兄弟節(jié)點；如果這個節(jié)點就是第一個兄弟節(jié)點,，那么該值為null
nextSibling	Node	指向后一個兄弟節(jié)點,；如果這個節(jié)點就是最后一個兄弟節(jié)點，那么該值為null
hasChildNodes()	Boolean	當childNodes包含一個或多個節(jié)點時,，返回真
attributes	NamedNodeMap	包含了代表一個元素的特性的Attr對象,；僅用于Element節(jié)點
appendChild(node)	Node	將node添加到childNodes的末尾
removeChild(node)	Node	從childNodes中刪除node
replaceChild (newnode,oldnode)	Node	將childNodes中的oldnode替換成newnode
insertBefore (newnode,refnode)	Node	在childNodes中的refnode之前插入newnode

除節(jié)點外，DOM還定義了一些助手對象,，它們可以和節(jié)點一起使用,，但不是DOM文檔必有的部分。

NodeList——節(jié)點數(shù)組,，按照數(shù)值進行索引,；用來表示一個元素的子節(jié)點。比如childNodes,。NodeList有個length屬性表示節(jié)點數(shù)量
NamedNodeMap——同時用數(shù)值和名字進行索引的節(jié)點表,；用于表示元素特性。比如元素的attributes,。NamedNodeMap對象也有一個length屬性來指示它所包含的節(jié)點的數(shù)量,。

這些助手對象為處理DOM文檔提供附加的訪問和遍歷方法。

屬性節(jié)點

正如前面提到的,，即便Node接口已具有attributes方法,，且已被所有類型的節(jié)點繼承，然而,，只有Element節(jié)點才能有特性,。Element節(jié)點的attributes屬性其實是NamedNodeMap,，它提供一些用于訪問和處理其內(nèi)容的方法：

getNamedItem(name)——返回nodeName屬性值等于name的節(jié)點；
removeNamedItem(name)——刪除nodeName屬性值等于name的節(jié)點,；
setNamedItem(node)——將node添加到列表中,，按其nodeName屬性進行索引；
item(pos)——像NodeList一樣,，返回在位置pos的節(jié)點,；

請記住這些方法都是返回一個Attr節(jié)點，而非特性值,。

當NamedNodeMap用于表示特性時,，其中每個節(jié)點都是Attr節(jié)點，它的nodeName屬性被設(shè)置為特性名稱,，而nodeValue屬性被設(shè)置為特性的值,。示例：

    <p id="p1" style="background-color:red;" title="P!!!">Some Text!</p>
    var p1 = document.getElementById("p1");
    //訪問ID屬性
    alert(p1.attributes.getNamedItem("id")).nodeValue;
    //也可以用數(shù)值來訪問ID屬性
    alert(p1.attributes.item(0)).nodeValue;
    //也可以改變它的值
    p1.attributes.getNamedItem("id").nodeValue = "newP1";

Attr節(jié)點也有一個完全等同于（同時也完全同步于）nodeValue屬性的value屬性，并且有name屬性和nodeName屬性保持同步,。我們可以隨意使用這些屬性來修改或變更特性,。但這些方法都比較復(fù)雜，所以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)方法訪問其中的內(nèi)容，在JavaScript中還可使用數(shù)組形式的下標訪問,！

創(chuàng)建和操縱節(jié)點

迄今為止,，已經(jīng)學(xué)過了如何訪問文檔中的不同節(jié)點，不過這僅僅是使用DOM所能實現(xiàn)的功能中的很小一部分,。還能添加,、刪除、替換（或者其他操作）DOM文檔中的節(jié)點,。正是這些功能使得DOM具有真正意義上的動態(tài)性,。

創(chuàng)建新節(jié)點

DOM Document（文檔）中有一些方法用于創(chuàng)建不同類型的節(jié)點，即便在所有的瀏覽器中的瀏覽器document對象并不需要全部支持所有的方法,。下面的表格列出了包含在DOM Level 1中的方法,，并列出不同的瀏覽器是否支持項。

方法	描述	IE	MOZ	OP	SAF
createAttribute (name)	用給定名稱name創(chuàng)建特性節(jié)點	×	×	×	－
createCDATASection (text)	用包含文本text的文本子節(jié)點創(chuàng)建一個CDATA Section	－	×	－	－
createComment(text)	創(chuàng)建包含文本text的注釋節(jié)點	×	×	×	×
createDocumentFragment()	創(chuàng)建文檔碎片節(jié)點	×	×	×	×
createElement (tagname)	創(chuàng)建標簽名為tagname的元素	×	×	×	×
createEntity Reference(name)	創(chuàng)建給定名稱的實體引用節(jié)點	－	×	－	－
createProcessing Instruction(target, data)	創(chuàng)建包含給定target和data的PI節(jié)點	－	×	－	－
createTextNode(text)	創(chuàng)建包含文本text的文本節(jié)點	×	×	×	×

注：IE = Windows的IE 6,；MOZ = 任意平臺的Mozilla 1.5,；OP=任意平臺的Opera 7.5；SAF=MacOS的Safari 1.2

最常用到的幾個方法是：createDocumentFragment(),、createElement()和createText- Node(),；其他的一些方法要么就是沒什么用（createComment()），要么就是瀏覽器的支持不夠,，目前還不太能用,。

動態(tài)創(chuàng)建一個段落示例

    var p = document.createElement("p");//創(chuàng)建一個元素節(jié)點,，傳入標簽名
    var txt = document.createTextNode("創(chuàng)建文本節(jié)點,傳參數(shù)即是文本內(nèi)容");
    p.appendChild(txt);//將txt所引用的文本節(jié)點插入p到p的最后面(在這里p是空的)
    //直到現(xiàn)在，頁面不會出現(xiàn)任何內(nèi)容,，必須將創(chuàng)建的節(jié)點插入到文檔中
    document.body.appendChild(p);//p將出現(xiàn)在最后

移動,，刪除節(jié)點方法及注意事項——appendChild,removeChild,replaceChild,insertBefore

    var p1 = document.getElementById("p1");
    document.body.appendChild(p1);//p1將會被作為body的最后一個子節(jié)點，然而頁面上仍只有一個p
    p1.parentNode.removeChild(p1);//removeChild必須是要刪除的節(jié)點的父節(jié)點調(diào)用
    //p1將會從頁面上消失,，然而它并沒有完全消失，我們還可以再將其插入文檔
    document.body.appendChild(p1);//因為變量p1包含了節(jié)點的引用
    var p2 = document.getElementById("p2");
    p2.parentNode.replaceChild(p1,p2);//p2將會被替換成p1,，p2將消失
    //而p1將從原來的位置移到p2的位置

克隆節(jié)點——cloneNode

基于上面的原因,，DOM為我們提供了一個克隆節(jié)點的方法用于生成一個節(jié)點的副本

    var p1 = document.getElementById("p1");
    var p2 = p1.cloneNode();
    document.body.appendChild(p2);//頁面上將會多出一個段落,不過段落中什么都沒有
    p2 = p1.cloneNode(true);//使用參數(shù)true表示克隆節(jié)點時包含子節(jié)點
    document.body.appendChild(p2);