亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

從DOM選擇器的返回值說起

lmxdawn / 3237人閱讀

摘要：原文發(fā)布在我的獨立博客上從選擇器的返回值說起拋開大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類似的，第一種情況下，根據(jù)獲取時，返回值是唯一的元素而根據(jù)等獲取時候，返回值是包含所有符合條件的多個元素的列表。

  
原文發(fā)布在我的獨立博客上 ~： 從DOM選擇器的返回值說起

拋開大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類似的getElementsByTagName, getElementsByClassName，getElementsByName. 第一種情況下，根據(jù)ID獲取時，返回值是唯一的元素；而根據(jù)TagName, ClassName 等獲取時候，返回值是包含所有符合條件的多個元素的“列表”。此處“列表”要加雙引號，是因為嚴格來說，JavaScript乃至DOM元素中并沒有所謂“列表”或List的數(shù)據(jù)類型／對象，既然不能稱為列表，那么它們到底是啥？

這篇blog就試圖從getElement(s)的返回值說起，往上扯一些早就該了解，但總是似懂非懂的簡單的DOM基礎(chǔ)知識。

getElements方法的返回值

getElementsByClassName("myClass")獲取指定類名為myClass的元素，getElementsByTagName("some-tag")獲取標(biāo)簽為"some-tag"的元素，它們的返回值都是 HTMLCollection 對象

getElementsByName("myName")獲取標(biāo)記了name屬性為myName的元素，它的返回值是NodeList對象

getElementById("myId")獲取唯一id屬性為myId的元素。有趣的是，當(dāng)訪問該元素的constructor.name屬性時，可以得到不同的值。form元素對應(yīng)HTMLFormElement對象, main標(biāo)簽則對應(yīng)HTMLElement對象，這應(yīng)該是從面向?qū)ο蟮慕嵌瓤?，不同類型的元素屬于不同的對象實例?br>

querySelector和querySelectorAll方法是HTML5新增的Web API，它們接受selector參數(shù)，selector正是我們常用的CSS選擇器。不同之處在于，querySelector("form")返回的是頁面中的第一個"form"元素，而querySelectorAll("form")返回NodeList類型，它們是所有form的列表。

NodeList與HTMLCollection

接著來看這兩個對象，它們都由多個元素組成一個“列表”，或者說“數(shù)組”，我們也可以像使用數(shù)組一樣方便地用下標(biāo)訪問單個元素。但是它們僅僅是Array-like，并沒有Array對象的其他常用方法，比如forEach.

javascriptvar buttons = document.getElementsByTagName("button");
console.log(buttons[1]);  // 輸出第2個button元素
console.log(buttons.forEach); // undefied
console.log(buttons.filter); //undefied

var next_nodes = document.getElementsByName("next");
console.log(next_nodes[0]); //輸出列表中第1個元素
console.log(next_nodes.forEach);    //undefied

除了以上提到的getElements方法之外

NodeList也是Node.childNodes, document.querySelector的返回值類型

HTMLCollection也是Node.children, document.forms等的對象類型

在使用getElements方法時，NodeList和HTMLCollection好像并沒什么不一一樣的，但是從字面上講，一個是節(jié)點列表，一個是HTML（元素）集合，并不是一回事。他們的不同可以從另外兩個方法看出，它們是childNodes和children，下面是一個合適的例子。

Node.childNodes與Node.children的區(qū)別 
html

  text in div
  Link
  
    Strong Text
    Strong Link
  



javascriptmydiv = document.querySelector("div");
console.log(mydiv.children);    // 不含#text "text in div"和注釋
console.log(mydiv.childNodes);  // 含文字"text in div"和注釋

mydiv.children獲得的，是

的子標(biāo)簽代表的元素，所以示例中的text in span并不屬于span.children

mydiv.childNodes獲得的，是包含文本內(nèi)容在內(nèi)的所有子節(jié)點。所謂節(jié)點，正是瀏覽器在構(gòu)造DOM樹的每一個不可或缺的元素，當(dāng)然少不了必須的文本節(jié)點。

所以它們不同就在于一個獲取的是元素，一個獲取所有節(jié)點。

從Element到Node到DOM

到底元素和節(jié)點有什么不同，看原型鏈。

以元素為例，調(diào)用mydiv.children[0].constructor.name，可知Link元素的類型HTMLAnchorElement; HTMLAnchorElement的原型鏈為：

HTMLAnchorElement --> HTMLElement --> Element --> Node --> EventTarget --> Object

調(diào)用mydiv.childNodes[0].constructor.name，可知節(jié)點的對象類型Comment，類似也可以得到文本節(jié)點的類型Text，它們的原型鏈為：

Comment --> CharacterData --> Node --> EventTarget --> Object
Text --> CharacterData -- Node -- EventTarget --> Object

看到原型鏈就可以豁然開朗了，Node是包含Element和Text, Comment在內(nèi)的概念，而HTMLElement只是Node的一個子集。

除了上面示例的幾個節(jié)點類型，Node包含的類型如下；對任意一個節(jié)點myNode，myNode.nodeType屬性就是它的類型。

圖片截自 MDN, thumb down圖標(biāo)代表廢棄API，是不推薦使用的類型

終于扯到最基本的DOM概念了，DOM事關(guān)重大，然而原理其實也就是兩句話的事兒。

DOM == Document Object Modle（文檔結(jié)構(gòu)模型），瀏覽器收到一個HTML頁面后，根據(jù)頁面結(jié)構(gòu)構(gòu)建一個DOM樹，DOM樹就是由不同類型的節(jié)點（Node）所組成的。在HTML文檔中，一條注釋語句是一個Node，一個HTML元素也是Node，甚至也是一個Node。有了Node對象，一生二，二生三，三生萬物；除了事件和ajax請求，前端編程說白了就剩下來使用瀏覽器提供的DOM API來對Node進行各種操作。

當(dāng)然，觀察Node的原型鏈，可以看到處于它上一層的是 EventTarget對象，這意味著Node都繼承了EventTarget的屬性和方法，最常見的當(dāng)然是.addEventListener。這正是javascript在前端能夠?qū)崿F(xiàn)各種可能性的原因，一切節(jié)點都可以綁定事件。

參考：
1. DOM概述 | MDN
2. Node - Web API Interfaces | MDN
3. NodeList - Web API Interfaces | MDN
4. HTML5中類jQuery選擇器querySelector的使用 - SegmentFault

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85686.html

相關(guān)文章

  • 前端性能優(yōu)化從css說起

    摘要：放在中減少引起和接下來我們再來討論一下圖片與雪碧圖或精靈，在網(wǎng)頁中我們會用到很多圖標(biāo)，如果每一個圖標(biāo)是單獨的一張圖片，那網(wǎng)頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網(wǎng)頁性能，所以要采取方法對網(wǎng)頁中圖標(biāo)使用進行優(yōu)化處理。 ???????我們都知道性能對于一個網(wǎng)站來說相當(dāng)重要，以至于很多公司都會專門招聘人員優(yōu)化網(wǎng)站性能，網(wǎng)上關(guān)于探討網(wǎng)站性能優(yōu)化的文章也非常多。性能是什么呢？簡單...

    KoreyLee 評論0 收藏0

  • 前端性能優(yōu)化從css說起

    摘要：放在中減少引起和接下來我們再來討論一下圖片與雪碧圖或精靈，在網(wǎng)頁中我們會用到很多圖標(biāo)，如果每一個圖標(biāo)是單獨的一張圖片，那網(wǎng)頁加載的時候，就會有多個請求去請求圖片，顯而易見會影響網(wǎng)頁性能，所以要采取方法對網(wǎng)頁中圖標(biāo)使用進行優(yōu)化處理。 ???????我們都知道性能對于一個網(wǎng)站來說相當(dāng)重要，以至于很多公司都會專門招聘人員優(yōu)化網(wǎng)站性能，網(wǎng)上關(guān)于探討網(wǎng)站性能優(yōu)化的文章也非常多。性能是什么呢？簡單...

    shiyang6017 評論0 收藏0

  • Xpath、Jsoup、Xsoup(我的Java爬蟲之二)

    摘要：它最主要的目的是為了在或文檔節(jié)點樹中定位節(jié)點所設(shè)計。選取所有擁有名為的屬性的元素。選取元素的所有元素，且其中的元素的值須大于。實例路徑表達式結(jié)果選取元素的所有子元素。如在加載文件的時候發(fā)生錯誤，將拋出，應(yīng)作適當(dāng)處理。 從Xpath說起 什么是Xpath XPath是W3C的一個標(biāo)準。它最主要的目的是為了在XML1.0或XML1.1文檔節(jié)點樹中定位節(jié)點所設(shè)計。XPath是一種表達式語言，...

    Big_fat_cat 評論0 收藏0

  • closest() 方法獲得匹配選擇器的第一個祖先元素

    摘要：當(dāng)被最接近的列表元素或其子后代元素被點擊時，會切換黃色背景定義和用法方法獲得匹配選擇器的第一個祖先元素，從當(dāng)前元素開始沿樹向上。詳細說明如果給定表示元素集合的對象，方法允許我們檢索樹中的這些元素以及它們的祖先元素，并用匹配元素構(gòu)造新的對象。 w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp 本例演示如何通過 c...

    seanlook 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<