離弦之Ray

Chapter 6 DOM 基礎(chǔ)

       書的這章主要是圍繞document這個(gè)對(duì)象的使用來(lái)講的。Document對(duì)象既是BOM的一部分， 也是Html DOM的HTMLDocument對(duì)象的一種表現(xiàn)形式，它也是XML DOM Document對(duì)象。JavaScript中的大部分處理DOM的過(guò)程都是用到了document對(duì)象。

Document對(duì)象實(shí)現(xiàn)Node接口的主要的特性和方法：

 

特性/方法	類型/返回類型	說(shuō)明
nodeName	String	節(jié)點(diǎn)的名字
nodeType	Number	節(jié)點(diǎn)的類型常量
nodeValue	String	節(jié)點(diǎn)的值
ownerDocument	Document	指向這個(gè)節(jié)點(diǎn)所屬的文檔
firstChild	Node	指向childNodes列表中的第一個(gè)節(jié)點(diǎn)
lastChild	Node	指向childNodes列表中的最后一個(gè)節(jié)點(diǎn)
childNodes	NodeList	所有子節(jié)點(diǎn)的列表
previousSibling	Node	指向前一個(gè)兄弟節(jié)點(diǎn)
nextSibling	Node	指向后一個(gè)兄弟節(jié)點(diǎn)
attributes	NamedNodeMap	包含了代表一個(gè)元素Attr對(duì)象， 僅用于Element
appendChild  (node)	Node	將node添加到childNodes尾
remmoveChild (node)	Node	從childNodes中除去
replaceChild（newNode，oldNode）	Node	將childNodes中的oldNode替換成newNode
insertBefore（newNode，refNode）	Node	在childNodes中的refNode前插入newNode

 

 

1：檢測(cè)節(jié)點(diǎn)類型

       Node接口定義了對(duì)應(yīng)12種不同節(jié)點(diǎn)類型的常量

       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

       注意：在IE中不支持這些常量， 但是可以自己定義：

       if(typeof Node == "undefined"){

    var Node = {

        ELEMENT_NODE:1,

        ATTRIBUTE_NODE:2,

        TEXT_NODE:3,

        CDATA_SECTION_NODE:4,

        ENTITY_REFERENCE_NODE:5,

        ENTITY_NODE:6,

        PROCESSING_INSTRUCTION_NODE:7,

        COMMENT_NODE:8,

        DOCUMENT_NODE:9,

        DOCUMENT_TYPE_NODE:10,

        DOCUMENT_FRAGMENT_NODE:11,

        NOTATION_NODE:12

        }

    }

    alert(document.nodeType == Node.DOCUMENT_NODE);//output true

    alert(document.documentElement.nodeType == Node.ELEMENT_NODE);

 

 

2：處理特性

    getNamedItem（name）:

    removeNamedItem (name):
    setNamedItem (node):

    item(pos):

  這些方法返回的都是Attr節(jié)點(diǎn)

    DOM又定義了3個(gè)元素訪問(wèn)方法來(lái)幫助訪問(wèn)特性

    getAttribute（name）：

    setAttribute（name，newValue）：

    removeAttribute（name）：

 

    getAttribute(name) 等同 attributes.getNamedItem(name).nodeValue;

    setAttribute(name, newValue) 等同 attributes.getNamedItem(name).nodevalue = newValue;

    removeAttribute(name) 等同 attributes.removeNamedItem(name);

 

 

3：訪問(wèn)指定節(jié)點(diǎn)

getElementsByTagName

       獲取某個(gè)頁(yè)面第一個(gè)段落的所有圖象：
       var oPs = document.getElementsByTagName("p");

    var oImgsInP = oPs[0].getelmentsByTagName("img");

 

       可以使用一個(gè)星號(hào)的方法來(lái)獲取document中的所有元素

       var oAllElements = document.getElementsByTagName("*");

    但是據(jù)說(shuō)在IE6.0并不是返回所有的元素， 所以無(wú)論怎么樣還是用document.all最好了。

 

getElementsByName

示例：

       html片段：

       ……

       <input type="radio" name="radColor" value="red"/> Red

    <input type="radio" name="radColor" value="green"/> Green

    <input type="radio" name="radColor" value="blue"/> Blue

    ……

 

    var oRadios = document.getElementsByName("radColor");

    alert(oRadios[0].getAttribute("value")); //output “red”

 

       這個(gè)方法在IE中只能適用于</input>,<img/>

       另外會(huì)返回ID等于給定名稱的元素

 

getElmentById

       id特性是唯一的， 因此這種方法是提取單個(gè)指定元素的最好的方法

      

4：創(chuàng)建和操作節(jié)點(diǎn)

 

       createComment(text)

       createAttribute(name)

       createElement(tagName)

       createTextNode(text)

      

       appendChild(node)

       removeChild(node)

       replaceChild(newNode, oldNode)

       insertBefore（newNode，refNode）

 

       createDocumentFragment  向document添加大量的數(shù)據(jù)

    var oFragment = document.createAttribute();

    var oP = document.createElement("p");

    var oText = document.createTextNode("Hello");

    oP.appendChild(oText);

    oFragment.append(oP);

    document.body.appendChild(oFragment);

 

 

5：Html DOM

       Html DOM 是對(duì)核心 DOM的擴(kuò)展，是專門針對(duì)html，讓一些DOM的操作更加的方便。

    http://www.w3schools.com/htmldom/dom_reference.asp

 

 

 

6：遍歷

       NodeIterator

       TreeWalker

       可惜IE不支持， 先不寫了…

 

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

我寫的遍歷html頁(yè)面， 構(gòu)造出一棵XML樹(shù) 的示例代碼

 

File： xmlTree.js

//遍歷整個(gè)html文檔， 構(gòu)造出xml樹(shù)

//generate an XML tree for the whole html document.

 

 

var sTree = new Array;

var index = 0;

var nodeTypes = ["ELEMENT_NODE",

              "ATTRIBUTE_NODE",

              "TEXT_NODE",

              "CDATA_SECTION_NODE",

              "ENTITY_REFERENCE_NODE",

              "ENTITY_NODE",

              "PROCESSING_INSTRUCTION_NODE",

              "COMMENT_NODE",

              "DOCUMENT_NODE",

              "DOCUMENT_TYPE_NODE",

              "DOCUMENT_FRAGMENT_NODE",

              "NOTATION_NODE"];

var sTag = "\t";

 

if(typeof Node == "undefined"){

    var Node = {

    ELEMENT_NODE:1,

    ATTRIBUTE_NODE:2,

    TEXT_NODE:3,

    CDATA_SECTION_NODE:4,

    ENTITY_REFERENCE_NODE:5,

    ENTITY_NODE:6,

    PROCESSING_INSTRUCTION_NODE:7,

    COMMENT_NODE:8,

    DOCUMENT_NODE:9,

    DOCUMENT_TYPE_NODE:10,

    DOCUMENT_FRAGMENT_NODE:11,

    NOTATION_NODE:12

    }

}

 

//打印出縮進(jìn)符號(hào)， 為了顯示出層次關(guān)系

function showTag(offset){

    var i =0;

    for(; i < offset; i++)

       sTree[index++] = sTag;

}

 

 

//根據(jù)節(jié)點(diǎn)的不同類型，打印出節(jié)點(diǎn)內(nèi)容， offset為縮進(jìn)值

function displayNode(node,offset){

    if(node == null || node == "undefined")

       return;

    switch(node.nodeType){//根據(jù)節(jié)點(diǎn)類型， 做不同處理

       case Node.ELEMENT_NODE:

           showTag(offset);

           sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.nodeName+node.childNodes.length+"\n";

           //如果該節(jié)點(diǎn)有屬性，則顯示出所有的屬性值

           if(node.attributes.length>0){

              var ii = 0;

              for(;ii<node.attributes.length;ii++){

                  showTag(offset+1);

                  sTree[index++] = nodeTypes[node.nodeType-1]+": "+

                                 node.attributes.item(ii).nodeName+": "+

                                 node.attributes.item(ii).nodeValue+"\n";

              }

           }

           break;

       case Node.TEXT_NODE:

           if(node.data !=null && node.data.length>=1){//除去空文本的值

              showTag(offset);           

              sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.data+"\n";      

           }         

           break;    

       default://這邊省去了很多其它節(jié)點(diǎn)類型的處理，就直接顯示了下nodeName

           showTag(offset);

           sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.nodeName+"\n";         

    }  

}

 

//遞歸構(gòu)造出XML樹(shù)

function createTree(current,offset){

    displayNode(current,offset);

    var childs = current.childNodes;

    if(childs != null && childs.length > 0){

       var ii = 0;   //定義ii很重要，如果for(ii=0;ii<childs.length;ii++)的話，ii會(huì)被當(dāng)成全局變量！！！

       for(; ii < childs.length; ii++){      

           createTree(childs[ii],offset+1);

       }  

    }     

}

 

function testCreateTree(){ 

    /**新打開(kāi)一個(gè)窗口，執(zhí)行

    var oNewWindow = window.open("about:blank","newwindow");

    oNewWindow.document.open();

    oNewWindow.document.write("<html><head><title></title></head>" +

                           "<body>Hello" +

                           "<p style=\"color:red\" id=\"p1\">Hello,p</p>" +

                           "</body></html>");

    oNewWindow.document.close();

    var oHtml = oNewWindow.document.documentElement;

    */

   

    //在原窗口執(zhí)行

    var oHtml = document.documentElement; 

    if(oHtml == null)

       alert("No Html docuemtn!!!");  

    createTree(oHtml,0);

    alert(sTree.join('').toString());

}

 

testCreateTree();