客戶端網頁編程-第五章-文檔對象模型DOM

           DOM:可以通過JavaScript,以編程方式控制網頁上的所有元素及屬性。

        1.理解DOM。

           創建一個文檔節點對象(document),然後從文檔中出現的第一個標記開始,按照XHTML的結構層次,一個一個地加載。每加載一個標記、註釋、或者屬性,就將其當作節點(node)。

           DOM的主要思想是HTML上每個元素分別對應DOM中的一個節點。

            *文檔節點Document--最頂層的節點,它代表整個 XHTML文檔。每個Web文檔都有一個文檔節點。

                  *文檔類型節點DocumentType--不能包含子節點。

            *元素節點Element--表示起始標記和結束標記之間的內容,唯一可以同時包含屬性和子節點的節點類型。

            *文本節點Text--代表XHTML文檔中元素的起始標記和結束標記之間,或者CDataSection內包含的普通文本。此節點類型不能包含子節點。

            *屬性節點--Attr--代表元素節點開始標記內指定的屬性。此節點類型不能包含子節點。

                     節點的屬性和方法:

                nodeName         nodeValue         nodeType         firstChild         lastChild         childNodes         ownerDocument             

                        previousSibling         nextSibling         hasChildNodes()         attributes         appendChild()         removeChild()

                replaceChild(newnode,oldnode)         insetBefore(newnode,oldnode)

                NodeList---節點數組。 

          2.使用DOM

         1>. 

           var   ohead = document.documentElement;

           HTML  DOM 頁定義了document.body作爲指向<body/>元素的指針。

           var  oBody = document.body;

         2>.

           處理元素屬性。DOM定義了三個元素方法來幫助訪問特性。

           getAttribute(name)           setAttribute(name,newvalue)           removeAttribute(name) 

            這些方法可以直接處理特性值,完全的隱藏Attr節點。例如,獲取某個元素的id屬性:

            var  sid = op.getAttribute("id");

             如要更改id:

              op.setAttribute("id","newid");

           3>.

               訪問指定節點。

              * getElementsByTagName() 方法      ? 

              var oImgs = document.getElementsByTagName("img") ;

              * getElementsById() 方法 

               var  vDiv = document.getElementsById("div1");

           4>.

               創建和操作節點。

                createAttribute(name)       createComment(text)       createDocumentFragment()       createElement(Tagname)       createTextNode(text)

           5>.

               innerHTML。

               可以通過innerHTML屬性將HTML字符串賦值給一個元素。   ? 

              雖然innerHTML並不是DOM標準的一部分,但是innerHTML幾乎被所有的瀏覽器支持。但Table和Select不支持。

             

             


           





                 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章