1. 程式人生 > >Javascript 獲取文檔元素

Javascript 獲取文檔元素

自動 大小寫 link classname 結構 func nbsp log 所有

一、getElementById()

  參數:id 屬性,必須唯一。

  返回:元素本身。若 id 不唯一,則返回第一個匹配的元素。

  定義的位置:僅 document(即:除 document 之外的元素調用該方法,會報 is not a function)。

  技術分享圖片

二、getElementsByName()

  參數:name 屬性,不必唯一。

  返回:NodeList 對象。

  定義的位置:僅 document。

 技術分享圖片

彩蛋:對於 <form>、<img>、<ifram>當且僅當為上述元素設置 name 屬性的時候,Window 對象會自動創建一個對應的屬性,並可通過 document.name

來獲取。若 name 僅匹配上一個元素,則返回元素本身,若匹配上多個元素,則返回 HTMLCollection 對象

技術分享圖片技術分享圖片

三、document.getElementsByTagName()

  參數:1、HTML 元素,不必唯一,不區分大小寫。

     2、* , 匹配所有元素。

  返回:HTMLCollection 對象。

  定義的位置:document 和 element(即:可以在任意元素下調用該方法,獲取指定元素的後代元素)。

  技術分享圖片

  彩蛋:對於 <form>、<img>、<a>,可通過 document.forms/.images/.links

來獲取元素,返回 HTMLCollection 對象。並包含通過 name/id 索引的方法

技術分享圖片

四、getElementsByClassName()

  參數:1、字符串參數,不必唯一。

     2、若需多個 className 匹配,使用空格分隔每個 class 。

     3、若文檔開頭對<!DOCTYPE>聲明選擇的是‘怪異模式’渲染,則 className 不區分大小寫,若選擇的是‘嚴格模式’渲染,則需區分大小寫。

  返回:HTMLCollection 對象。

  定義的位置:document 和 element。

  技術分享圖片

五、querySelectorAll()

  參數:css 選擇器的字符串參數(ID:#、class:.、tag:div、屬性:p[name=x]、文檔結構:ul>li:first-child、獲取多個元素:div, #log)。

  返回:1、返回選擇器匹配的所有元素的 NodeList 對象。

     2、沒有匹配的元素,返回 空的 NodeList 對象。

     3、選擇器字符串非法,拋出異常。

  定義的位置:document 和 element。

  技術分享圖片

  彩蛋:JQuery 庫中 css 選擇器使用了一個與 querySelectorAll() 等效的方法,命名為 $()

六、querySelector()

  參數:css 選擇器的字符串參數(ID:#、class:.、tag:div、屬性:p[name=x]、文檔結構:ul>li:first-child、獲取多個元素:div, #log)。

  返回:1、返回選擇器匹配的第一個元素本身。

     2、沒有匹配的元素,返回 null。

  定義的位置:document 和 element。

  技術分享圖片

Javascript 獲取文檔元素