1. 程式人生 > 程式設計 >Javascript DOM的簡介,節點和獲取元素詳解

Javascript DOM的簡介,節點和獲取元素詳解

目錄
  • DOM
  • 節點
  • 元素節點:
  • 文字節點:
  • 屬性節點:
  • 獲取元素
    • getElementById()
    • getElementsByTagName()
    • getElementsByClassName()
  • 總結:

    DOM

    文件:DOM中的“D”,當建立一個並把它載入到Web瀏覽器中時,它把編寫的網頁文件轉換為一個文件物件。

    物件:DOM中的“O”,物件是一種自給自足的資料集合。與某個特定物件相關聯的變數被稱為這個物件的屬性,只能通過某個特定物件去呼叫的函式被稱為這個物件的方法

    模型:DOM中的“M”,它是某種事物的表現形式。DOM把一份文件表示為一顆家譜樹qqnMDjBbUz

    節點

    節點:文件是由節點構成,節點是文件樹上的樹枝和樹葉。

    DOM中有許多不同型別的節點,如元素節點,文字節點和屬性節點。

    元素節點:

    標籤的名字就是元素的名字。文字段落元素的名字是“p” ,無序清單元素的名字是“u1”,列表項元素的名字是“1i”。

    元素可以包含其他的元素。在我們的“購物清單”文件裡,所有的列表項元素都包含在-一個無序清單元素的內部。事實上,沒有被包含在其他元素裡的唯一元素是元素, 它是我們的節點樹的根元素。

    文字節點:

    元素節點只是節點型別的種。如果一份文件完全由一 些空白元素構成,它將有一個結構,但這份文件本身將不會包含什麼內容。在內容為王的網際網路上,絕大多數內容都是由文字提供的。如<p>元素包含著的文字是一 個文字節點(text node)。

    在XHTML文件裡,文字節點總是被包含在元素節點的內部。但並非所有的元素節點都包含文字節點。

    屬性節點:

    屬性節點用來對元素做出更具體的描述。如幾乎所有的元素都有一個title屬性,我們可以利用這個屬性對包含在元素裡的東西做出準確的描述,屬性節點總是包含在元素節點中。

    獲取元素

    有三種DOM方法可以獲取元素節點,分別通過元素ID,標籤名字和類名字來獲取。

    getElementById()

    DOM提供了一個名為getElementById的方法,這個方法將返回一個與那個有著給定id屬性值的元素節點對應的物件,他說document物件特有的函式,函式名的後面必須跟有一對圓括號,這個圓括號包含著函式的引數。getElementById方法只有一個引數,你想獲取的那個元素的id屬性的值必須放在單引號或雙引號裡document. getElementById(id)

    。文件中的每一個元素都是一個物件。DOM提供的方法能得到任何一個物件。例如:

    document. getElementById(“purchases”)`
    

    getElementsByTagName()

    getElementsByTagName方法返回一個物件陣列,每個物件分別對應著文件裡有著給定標籤的一個元素。這個方法也只有一個引數,它的引數是標籤的名字:element.getElementsByTagName(tag)
    但它返回的是一個數組,它與getElementById方法有許多相似之處,如:

    document. getElementsByTagName("li");
    

    getElementsByClassName()

    這個方法可以可以通過Class屬性中的類名來訪問元素。getElementsByClassName只接受一個引數,就是類名:

    getElementsByClassName(class)
    

    這個方法的返回值與getElementsByTagName()類似,客棧都是一個具有相同類名的元素的陣列。如:

    document.getElementsByClassName("sale");
    

    使用這個方法還可以查詢帶有多個類www.cppcns.com名的元素,只要在字串引數中使用空格分隔類名即可。

    總結:

    1、一份文件就是一顆節點數。

    2、節點分為不同型別:元素節點、屬性節點、和文字節點等。

    3、getElementById將返回一個物件,該物件對應著文件裡的一個特定的元素。

    4、getElementsByTagName和getElementsByClassName將返回一個物件陣列,它們分別對應著文件裡的一組特定的元素節點。

    5、每個節點都是一個物件。

    本篇文章就到這裡了,希望能夠給你帶www.cppcns.com來幫助,也希望您能夠多多關注我們的更多內容!