離弦之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)航:
           
          主站蜘蛛池模板: 云龙县| 富川| 莱芜市| 专栏| 鲁山县| 枣阳市| 新蔡县| 新民市| 华亭县| 女性| 梨树县| 新乡县| 嵊泗县| 霍城县| 芦山县| 浦北县| 怀宁县| 双辽市| 康平县| 玉溪市| 广州市| 建德市| 巴林左旗| 锦州市| 宜宾市| 盐城市| 丰台区| 广南县| 浙江省| 鹤山市| 隆德县| 舒城县| 固始县| 珲春市| 周至县| 馆陶县| 平度市| 信丰县| 成都市| 中江县| 大方县|