成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript DOM 2 - 獲取文檔元素

sydMobile / 1908人閱讀

摘要：在低于瀏覽器中，也返回匹配屬性的元素。例如通過(guò)匹配元素的的值來(lái)獲取元素。結(jié)果返回對(duì)象其實(shí)很類似于的選擇元素的方法，而也是解決獲取頁(yè)面元素的終極方法。

1: 獲取文檔元素的方法有7個(gè)

1: getElementById(id) ［通過(guò)id獲?。?
2: getElementsByName(name) ［通過(guò)元素的name屬性獲?。?
3: getElementsByTagName(tagName) ［通過(guò)Tag名字獲?。?
4: getElementsByTagNameNS(nameSpace, tagName) ［通過(guò)值得namSpace下的Tag名字獲?。?

5: getElementsByClassName(className)［通過(guò)元素CSS類名字獲?。?
6: querySelectorAll(cssQuery) ［通過(guò)匹配CSS選擇器獲取匹配的所有元素］

7: querySelector（cssQuery）［通過(guò)匹配CSS選擇器獲取匹配的第一個(gè)元素］

其中:

1: 在方法名上，除了ById是單數(shù)的"Element", 其他都是復(fù)數(shù)的"Elements"

2: 返回HTMLElement類型的有: 
    getElementById()
    querySelector()
    
3: 其余都是返回NodeList或者HTMLCollection

4: 同時(shí)定義在Document和Element上的方法有：
    getElementsByClassName()
    getElementsByTagName()
    getElementsByTagNameNS()
    querySelectorAll()
    querySelector()

先來(lái)對(duì)以上幾點(diǎn)進(jìn)行點(diǎn)直觀的感受，假如我們的HTML代碼是這樣的：


    
item list

    
    
        
  • book 1
    • 
        
  • book 2
    • 
    

    
    
        
  • Cat 1
    • 
        
  • Cat 2
    •

1: 返回HTMLElement的nodeList的區(qū)別

2: 同時(shí)定義在Document和Element上的方法區(qū)別

bookItem是在Element元素(bookList[0])上使用getElementsByTagName()得到的結(jié)果，而allLi是在document上使用getElementsByTagName()得到的結(jié)果。可以看出在某個(gè)HTMLElement元素上使用獲取dom元素的話，結(jié)果只會(huì)返回此元素的后代節(jié)點(diǎn)里滿足查詢條件的節(jié)點(diǎn)，而document上使用，會(huì)返回整個(gè)文檔里面的滿足查詢條件的全部節(jié)點(diǎn)。
接下來(lái)對(duì)以上6個(gè)方法進(jìn)行具體的講解：

1: getElementById(id)

 var pageTitle = document.getElementById("pageTitle");

沒(méi)什么好說(shuō)的，傳入元素id的值，返回HTMLElement。
瀏覽器特性：

1: 在低于IE 8瀏覽器中，getElementById()對(duì)id不區(qū)分大小寫。
2: 在低于IE 8瀏覽器中，也返回匹配name屬性的元素。

2: getElementsByName(name)

var elements = document.getElementsByName("xxx");

通過(guò)元素的name屬性選取元素，返回NodeList對(duì)象，包含若干Element對(duì)象的只讀數(shù)組

特別注意：

1: getElementsByName()定義在HTMLDocument類中，而不是Document類中，所以只能在HTML文檔可以用，在XML文檔里不可以用。
2: 在IE中此方法也返回id屬性匹配的元素
3: 為某些HTML元素設(shè)置name屬性，會(huì)在Document對(duì)象上設(shè)置同名的屬性（如果此屬性名不存在）

針對(duì)以上第3點(diǎn)解釋一下：

在document上自動(dòng)創(chuàng)建了以name的值為名字的屬性：‘logo’和‘infoForm’。如果HTML里面只有一個(gè)元素的name是這個(gè)值，那通過(guò)document的屬性去取值，返回這個(gè)HTMLElement對(duì)象；如果有多個(gè)元素的name是這個(gè)值，那就返回包含這些元素的NodeList對(duì)象。

3: getElementsByTagName(tagName)

var spanElements = document.getElementsByTagName("span");

傳入tag的名稱，遞歸地獲取匹配的元素，先看一段代碼


    parent
    child

Sibling

從返回結(jié)果的NodeList對(duì)象的元素順序來(lái)看，它會(huì)遞歸地把某個(gè)節(jié)點(diǎn)都查詢完，然后再去查詢它的兄弟節(jié)點(diǎn)。
特別注意：

1: 因?yàn)镠TML不區(qū)分大小寫，所以這個(gè)方法對(duì)tag名也不區(qū)分大小寫，就是說(shuō)如果查詢‘span’,同時(shí)也會(huì)匹配‘’元素
2: 如果傳入通配符"*",會(huì)獲得一個(gè)代表真哥哥文檔中元素的NodeList對(duì)象。例如：

4: getElementsByClassName(className)

var elements = document.getElementsByClassName("red");

通過(guò)匹配元素的class的值來(lái)獲取元素。參數(shù)為包含全部class值的字符串(class前面不加".")，當(dāng)某個(gè)元素的class值有多個(gè)時(shí)，參數(shù)用空格隔開(kāi)。

可以看到查詢結(jié)果不包含第一個(gè)

元素，因?yàn)樗腸lass里面沒(méi)有‘bold’;結(jié)果包含第三個(gè)

元素，因?yàn)樗腸lass包含參數(shù)里面的所有class名，即使它自己本身還多出一個(gè)別的class。所以這是一個(gè)“包含全部”而不是“完全相等“的查詢。

5: querySelectorAll(cssQuery)

var elements = document.querySelectorAll(‘.bookList li’);

參數(shù)為一個(gè)字符串，內(nèi)容為和CSS語(yǔ)法一樣的，css選擇器(通過(guò)".", "#"等來(lái)區(qū)分是class還是id之類的值)。結(jié)果返回NodeList對(duì)象

    
    
  • book 1
    • 
    
  • book 2
    • 

 

    
    
  • cat 1
    • 
    
  • cat 2
    •

其實(shí)很類似于jQuery的選擇元素的方法，而querySelectorAll()也是解決獲取頁(yè)面元素的終極方法。

6: querySelector(cssSelector)

var element = document.querySelector(".red");

它的用法與querySelectorAll()相似，但是有兩個(gè)區(qū)別：

1: querySelector()只返回匹配的第一個(gè)元素
2: querySelector()返回結(jié)果為HTMLElement, 而不是一個(gè)包含一個(gè)元素的NodeList對(duì)象

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88308.html

相關(guān)文章

  • Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列 二

    摘要：假如對(duì)應(yīng)的為一組對(duì)象，則返回該組對(duì)象中的第一個(gè)。方法返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合。語(yǔ)法說(shuō)明是標(biāo)簽的名稱，如等標(biāo)簽名。是一個(gè)人的身份證號(hào)碼，是唯一的。注意把指定的屬性設(shè)置為指定的值。表示文檔所在窗口的當(dāng)前寬度。 簡(jiǎn)述 本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識(shí)，誰(shuí)都想掌握高端大氣的技術(shù)，但是我覺(jué)得沒(méi)有一個(gè)扎實(shí)的基礎(chǔ)，我認(rèn)為一切高階技術(shù)對(duì)我來(lái)講都是過(guò)眼云煙，要成為一名及格的前...

    pcChao 評(píng)論0 收藏0

  • JavaScript學(xué)習(xí)總結(jié)（三）BOM和DOM詳解

    摘要：有級(jí)級(jí)級(jí)共個(gè)級(jí)別。事件類型事件類型鼠標(biāo)事件鍵盤事件事件事件處理器執(zhí)行代碼的程序在事件發(fā)生時(shí)會(huì)對(duì)事件做出響應(yīng)。在標(biāo)簽中使用事件處理器的語(yǔ)法是標(biāo)簽事件處理器代碼事件處理程序事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。 DOM介紹 D（文檔）可以理解為整個(gè)Web加載的網(wǎng)頁(yè)文檔，O（對(duì)象）可以理解為類似window對(duì)象只來(lái)的東西，可以調(diào)用屬性和方法，這里我們說(shuō)的是document對(duì)象，M（模型）可...

    littlelightss 評(píng)論0 收藏0

  • 說(shuō)說(shuō)JavaScript中DOM的Node對(duì)象

    摘要：對(duì)象對(duì)象的概念首先了解一下對(duì)象怎么用。對(duì)象是解析節(jié)點(diǎn)樹(shù)結(jié)構(gòu)的主要入口。繼承鏈關(guān)系對(duì)象是繼承于對(duì)象的，是一個(gè)用于接收事件的對(duì)象。代碼示例的標(biāo)準(zhǔn)規(guī)范中的對(duì)象和對(duì)象都是繼承于對(duì)象的。屬性對(duì)象的屬性用于獲取指定的節(jié)點(diǎn)名稱。參數(shù)表示要?jiǎng)h除的節(jié)點(diǎn)。 Node對(duì)象 Node對(duì)象的概念 首先了解一下Node對(duì)象怎么用。DOM的標(biāo)準(zhǔn)規(guī)范中提供了Node對(duì)象，該對(duì)象主要提供了用于解析DOM節(jié)點(diǎn)樹(shù)結(jié)構(gòu)的屬性...

    Batkid 評(píng)論0 收藏0

  • 回到基礎(chǔ)：理解 JavaScript DOM

    摘要：事件處理允許對(duì)事件做出反應(yīng)。還可以用代碼為多個(gè)元素分配相同的事件。指定事件監(jiān)聽(tīng)器接下來(lái)看看怎樣為元素分配事件監(jiān)聽(tīng)器。 翻譯：瘋狂惡的技術(shù)宅https://medium.freecodecamp.o... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 Javascript DOM（文檔對(duì)象模型）是一個(gè)允許開(kāi)發(fā)人員操縱頁(yè)面內(nèi)容、結(jié)構(gòu)和風(fēng)...

    wemallshop 評(píng)論0 收藏0

  • 高性能JavaScript閱讀簡(jiǎn)記（二）

    摘要：訪問(wèn)集合元素時(shí)使用局部變量對(duì)于任何類型的訪問(wèn)，如果對(duì)同一個(gè)屬性或者方法訪問(wèn)多次，最好使用一個(gè)局部變量對(duì)此成員進(jìn)行緩存。 三、DOM Scripting DOM編程 我們都知道對(duì)DOM操作的代價(jià)昂貴，這往往成為網(wǎng)頁(yè)應(yīng)用中的性能瓶頸。在解決這個(gè)問(wèn)題之前，我們需要先知道什么是DOM，為什么他會(huì)很慢。 DOM in the Browser World 瀏覽器中的DOM DOM是一個(gè)獨(dú)立于語(yǔ)言...

    RaoMeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<