国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從DOM選擇器的返回值說起

lmxdawn / 3179人閱讀

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

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

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

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

getElements方法的返回值

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

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

getElementById("myId")獲取唯一id屬性為myId的元素。有趣的是，當訪問該元素的constructor.name屬性時，可以得到不同的值。form元素對應HTMLFormElement對象, main標簽則對應HTMLElement對象，這應該是從面向對象的角度看，不同類型的元素屬于不同的對象實例。

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

NodeList與HTMLCollection

接著來看這兩個對象，它們都由多個元素組成一個“列表”，或者說“數組”，我們也可以像使用數組一樣方便地用下標訪問單個元素。但是它們僅僅是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好像并沒什么不一一樣的，但是從字面上講，一個是節點列表，一個是HTML（元素）集合，并不是一回事。他們的不同可以從另外兩個方法看出，它們是childNodes和children，下面是一個合適的例子。

Node.childNodes與Node.children的區別 
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獲得的，是

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

mydiv.childNodes獲得的，是包含文本內容在內的所有子節點。所謂節點，正是瀏覽器在構造DOM樹的每一個不可或缺的元素，當然少不了必須的文本節點。

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

從Element到Node到DOM

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

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

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

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

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

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

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

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

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

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

當然，觀察Node的原型鏈，可以看到處于它上一層的是 EventTarget對象，這意味著Node都繼承了EventTarget的屬性和方法，最常見的當然是.addEventListener。這正是javascript在前端能夠實現各種可能性的原因，一切節點都可以綁定事件。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85686.html

相關文章

  • 前端性能優化從css說起

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

    KoreyLee 評論0 收藏0

  • 前端性能優化從css說起

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

    shiyang6017 評論0 收藏0

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

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

    Big_fat_cat 評論0 收藏0

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

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

    seanlook 評論0 收藏0

發表評論

0條評論

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