DOM常用方法總結


  DOM(Document Object Model:文檔對象模型)為javascript中的一部分,它為訪問和修改html文檔或xml文檔提供了一些編程接口,DOM以對象的形式來描述文檔中的內容,以樹形結構來管理這些對象,並提供了一些方法來得到這些對象並對其進行修改。

  獲取元素對象方法:

    1.document.getElementById() :返回對擁有指定 id 的第一個對象的引用。

    2.document.getElementsByName():返回帶有指定 名稱 的對象集合。

    3.document.getElementsByTagName():返回帶有指定 標簽名 的對象集合。

  上述三個方法是經常用到的獲取Element 元素對象 的方法,DOM由節點組成,而所有節點都需要獲取元素對象后用DOM提供的特定方法獲取,因此這些方法是使用DOM進行編程的入口,在DOM中每個東西都是 節點:

  • 文檔本身就是一個文檔對象
  • 所有 HTML 元素都是元素節點
  • 所有 HTML 屬性都是屬性節點
  • 插入到 HTML 元素文本是文本節點
  • 注釋是注釋節點

  獲得節點方法:

    1.element.getAttributeNode():獲得該節點的屬性節點。

    2.element.firstChild:獲得該節點第一個子節點。

    3.element.lastChild:獲得該節點的最后一個子節點。

    3.element.parentNode():獲得該節點的父節點。

    4.element.childNodes():返回該節點的子節點數組(由於空格也會被當做文本節點被返回。所以該方法常用element.getElementsByTagName()代替)。

    5.element.nextSibling:返回該節點的下一個兄弟節點。
    6.element.previousSibling:返回該節點的上一個兄弟節點。

  節點常用屬性:

    1.element.nodeName:其內容是給定節點的名字。
       如果是元素節點,nodeName返回這個元素的名稱(標簽名)。
       如果是屬性節點,nodeName返回這個屬性的名稱(屬性名)。
       如果是文本節點,nodeName返回一個內容為#text 的字符串。
    2.element.nodeType:返回一個整數,這個數值代表着給定節點的類型。
      Node.ELEMENT_NODE     ---1    -- 元素節點
      Node.ATTRIBUTE_NODE  ---2    -- 屬性節點
      Node.TEXT_NODE             ---3    -- 文本節點
    3.element.nodeValue:返回給定節點的當前值(字符串)。
      如果給定節點是一個屬性節點,返回值是這個屬性的值。
      如果給定節點是一個文本節點,返回值是這個文本節點內容。  
      如果給定節點是一個元素節點,返回值是 null。
   操作節點常用方法:
    1.element.appendChild():在該節點所有子節點的最后加入一個子節點。
    2.element.insertBefore(new,old):在該節點的指定子節點前加入一個子節點。
    3.element.removeChild():刪除該節點的指定子節點。
    4.element.replaceChild(new,old):替換該節點的指定子節點。
    5.element.cloneNode(boolean):復制指定節點並返回,參數為true時復制子節點,默認為false。
  innerHTML屬性不是W3C推薦標准,但由於其操作的方便性,大多數主流瀏覽器都支持這個屬性,通過此屬性可以很方便的獲取或寫入元素的文本信息,可以調用該屬性直接獲得元素的文本內容,也可以通過賦值字符串的方式將指定的HTML文本寫入調用該屬性的元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM