離弦之Ray

            BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
            55 Posts :: 0 Stories :: 33 Comments :: 0 Trackbacks

          Chapter 6 DOM 基礎(chǔ)

                 書的這章主要是圍繞document這個對象的使用來講的。Document對象既是BOM的一部分, 也是Html DOMHTMLDocument對象的一種表現(xiàn)形式,它也是XML DOM Document對象。JavaScript中的大部分處理DOM的過程都是用到了document對象。

          Document對象實現(xiàn)Node接口的主要的特性和方法:

           

          特性/方法

          類型/返回類型

          說明

          nodeName

          String

          節(jié)點的名字

          nodeType

          Number

          節(jié)點的類型常量

          nodeValue

          String

          節(jié)點的值

          ownerDocument

          Document

          指向這個節(jié)點所屬的文檔

          firstChild

          Node

          指向childNodes列表中的第一個節(jié)點

          lastChild

          Node

          指向childNodes列表中的最后一個節(jié)點

          childNodes

          NodeList

          所有子節(jié)點的列表

          previousSibling

          Node

          指向前一個兄弟節(jié)點

          nextSibling

          Node

          指向后一個兄弟節(jié)點

          attributes

          NamedNodeMap

          包含了代表一個元素Attr對象, 僅用于Element

          appendChild  (node)

          Node

          node添加到childNodes

          remmoveChild (node)

          Node

          childNodes中除去

          replaceChildnewNodeoldNode

          Node

          childNodes中的oldNode替換成newNode

          insertBeforenewNoderefNode

          Node

          childNodes中的refNode前插入newNode

           

           

          1:檢測節(jié)點類型

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

                 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:處理特性

              getNamedItemname:

              removeNamedItem (name):
              setNamedItem (node):

              item(pos):

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

              DOM又定義了3個元素訪問方法來幫助訪問特性

              getAttributename):

              setAttributenamenewValue):

              removeAttributename):

           

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

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

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

           

           

          3:訪問指定節(jié)點

          getElementsByTagName

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

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

           

                 可以使用一個星號的方法來獲取document中的所有元素

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

              但是據(jù)說在IE6.0并不是返回所有的元素, 所以無論怎么樣還是用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”

           

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

                 另外會返回ID等于給定名稱的元素

           

          getElmentById

                 id特性是唯一的, 因此這種方法是提取單個指定元素的最好的方法

                

          4:創(chuàng)建和操作節(jié)點

           

                 createComment(text)

                 createAttribute(name)

                 createElement(tagName)

                 createTextNode(text)

                

                 appendChild(node)

                 removeChild(node)

                 replaceChild(newNode, oldNode)

                 insertBeforenewNoderefNode

           

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

           

           

          5Html DOM

                 Html DOM 是對核心 DOM的擴展,是專門針對html,讓一些DOM的操作更加的方便。

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

           

           

           

          6:遍歷

                 NodeIterator

                 TreeWalker

                 可惜IE不支持, 先不寫了

           

           

          =======================================

          我寫的遍歷html頁面, 構(gòu)造出一棵XML 的示例代碼

           

          File xmlTree.js

          //遍歷整個html文檔, 構(gòu)造出xml

          //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

              }

          }

           

          //打印出縮進符號, 為了顯示出層次關(guān)系

          function showTag(offset){

              var i =0;

              for(; i < offset; i++)

                 sTree[index++] = sTag;

          }

           

           

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

          function displayNode(node,offset){

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

                 return;

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

                 case Node.ELEMENT_NODE:

                     showTag(offset);

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

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

                     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é)點類型的處理,就直接顯示了下nodeName

                     showTag(offset);

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

              }  

          }

           

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

          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會被當(dāng)成全局變量!!!

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

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

                 }  

              }     

          }

           

          function testCreateTree(){ 

              /**新打開一個窗口,執(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();

           

           

           

           

          posted on 2008-01-04 20:29 離弦之ray的技術(shù)天空 閱讀(438) 評論(2)  編輯  收藏 所屬分類: JavaScript

          Feedback

          # re: Professional JavaScript For Web Developers(Chapter 6)[未登錄] 2008-01-05 21:08 ray
          test 回復(fù)通知  回復(fù)  更多評論
            

          # re: Professional JavaScript For Web Developers(Chapter 6) 2008-01-05 21:13 建建
          辛苦拉~~  回復(fù)  更多評論
            


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 纳雍县| 城步| 监利县| 留坝县| 龙岩市| 永安市| 收藏| 德惠市| 八宿县| 陕西省| 盐城市| 抚顺县| 昌乐县| 北宁市| 保德县| 霍林郭勒市| 远安县| 栖霞市| 和林格尔县| 沧州市| 牙克石市| 库车县| 华容县| 丹巴县| 当涂县| 治多县| 天门市| 临江市| 思茅市| 通化县| 湘乡市| 长丰县| 左云县| 得荣县| 焉耆| 沭阳县| 建始县| 保康县| 岳阳市| 资兴市| 内江市|