資訊專欄INFORMATION COLUMN
摘要：原文發(fā)布在我的獨(dú)立博客上從選擇器的返回值說起拋開大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類似的，第一種情況下，根據(jù)獲取時(shí)，返回值是唯一的元素而根據(jù)等獲取時(shí)候，返回值是包含所有符合條件的多個(gè)元素的列表。
原文發(fā)布在我的獨(dú)立博客上 ~： 從DOM選擇器的返回值說起
拋開大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類似的getElementsByTagName, getElementsByClassName，getElementsByName. 第一種情況下，根據(jù)ID獲取時(shí)，返回值是唯一的元素；而根據(jù)TagName, ClassName 等獲取時(shí)候，返回值是包含所有符合條件的多個(gè)元素的“列表”。此處“列表”要加雙引號(hào)，是因?yàn)閲?yán)格來說，JavaScript乃至DOM元素中并沒有所謂“列表”或List的數(shù)據(jù)類型／對(duì)象，既然不能稱為列表，那么它們到底是啥？
這篇blog就試圖從getElement(s)的返回值說起，往上扯一些早就該了解，但總是似懂非懂的簡(jiǎn)單的DOM基礎(chǔ)知識(shí)。
getElements方法的返回值getElementsByClassName("myClass")獲取指定類名為myClass的元素，getElementsByTagName("some-tag")獲取標(biāo)簽為"some-tag"的元素，它們的返回值都是 HTMLCollection 對(duì)象
getElementsByName("myName")獲取標(biāo)記了name屬性為myName的元素，它的返回值是NodeList對(duì)象
getElementById("myId")獲取唯一id屬性為myId的元素。有趣的是，當(dāng)訪問該元素的constructor.name屬性時(shí)，可以得到不同的值。form元素對(duì)應(yīng)HTMLFormElement對(duì)象, main標(biāo)簽則對(duì)應(yīng)HTMLElement對(duì)象，這應(yīng)該是從面向?qū)ο蟮慕嵌瓤矗煌愋偷脑貙儆诓煌膶?duì)象實(shí)例。
querySelector和querySelectorAll方法是HTML5新增的Web API，它們接受selector參數(shù)，selector正是我們常用的CSS選擇器。不同之處在于，querySelector("form")返回的是頁(yè)面中的第一個(gè)"form"元素，而querySelectorAll("form")返回NodeList類型，它們是所有form的列表。
接著來看這兩個(gè)對(duì)象，它們都由多個(gè)元素組成一個(gè)“列表”，或者說“數(shù)組”，我們也可以像使用數(shù)組一樣方便地用下標(biāo)訪問單個(gè)元素。但是它們僅僅是Array-like，并沒有Array對(duì)象的其他常用方法，比如forEach.
javascriptvar buttons = document.getElementsByTagName("button");
console.log(buttons[1]); // 輸出第2個(gè)button元素
console.log(buttons.forEach); // undefied
console.log(buttons.filter); //undefied
var next_nodes = document.getElementsByName("next");
console.log(next_nodes[0]); //輸出列表中第1個(gè)元素
console.log(next_nodes.forEach); //undefied
除了以上提到的getElements方法之外
NodeList也是Node.childNodes, document.querySelector的返回值類型
HTMLCollection也是Node.children, document.forms等的對(duì)象類型
在使用getElements方法時(shí)，NodeList和HTMLCollection好像并沒什么不一一樣的，但是從字面上講，一個(gè)是節(jié)點(diǎn)列表，一個(gè)是HTML（元素）集合，并不是一回事。他們的不同可以從另外兩個(gè)方法看出，它們是childNodes和children，下面是一個(gè)合適的例子。
Node.childNodes與Node.children的區(qū)別htmltext 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獲得的，是 mydiv.childNodes獲得的，是包含文本內(nèi)容在內(nèi)的所有子節(jié)點(diǎn)。所謂節(jié)點(diǎn)，正是瀏覽器在構(gòu)造DOM樹的每一個(gè)不可或缺的元素，當(dāng)然少不了必須的文本節(jié)點(diǎn)。 所以它們不同就在于一個(gè)獲取的是元素，一個(gè)獲取所有節(jié)點(diǎn)。 到底元素和節(jié)點(diǎn)有什么不同，看原型鏈。 以元素為例，調(diào)用mydiv.children[0].constructor.name，可知Link元素的類型HTMLAnchorElement; HTMLAnchorElement的原型鏈為： HTMLAnchorElement --> HTMLElement --> Element --> Node --> EventTarget --> Object 調(diào)用mydiv.childNodes[0].constructor.name，可知節(jié)點(diǎn)的對(duì)象類型Comment，類似也可以得到文本節(jié)點(diǎn)的類型Text，它們的原型鏈為： Comment --> CharacterData --> Node --> EventTarget --> Object 看到原型鏈就可以豁然開朗了，Node是包含Element和Text, Comment在內(nèi)的概念，而HTMLElement只是Node的一個(gè)子集。 除了上面示例的幾個(gè)節(jié)點(diǎn)類型，Node包含的類型如下；對(duì)任意一個(gè)節(jié)點(diǎn)myNode，myNode.nodeType屬性就是它的類型。 圖片截自 MDN, thumb down圖標(biāo)代表廢棄API，是不推薦使用的類型 終于扯到最基本的DOM概念了，DOM事關(guān)重大，然而原理其實(shí)也就是兩句話的事兒。 DOM == Document Object Modle（文檔結(jié)構(gòu)模型），瀏覽器收到一個(gè)HTML頁(yè)面后，根據(jù)頁(yè)面結(jié)構(gòu)構(gòu)建一個(gè)DOM樹，DOM樹就是由不同類型的節(jié)點(diǎn)（Node）所組成的。在HTML文檔中，一條注釋語(yǔ)句是一個(gè)Node，一個(gè)HTML元素也是Node，甚至也是一個(gè)Node。有了Node對(duì)象，一生二，二生三，三生萬(wàn)物；除了事件和ajax請(qǐng)求，前端編程說白了就剩下來使用瀏覽器提供的DOM API來對(duì)Node進(jìn)行各種操作。 當(dāng)然，觀察Node的原型鏈，可以看到處于它上一層的是 EventTarget對(duì)象，這意味著Node都繼承了EventTarget的屬性和方法，最常見的當(dāng)然是.addEventListener。這正是javascript在前端能夠?qū)崿F(xiàn)各種可能性的原因，一切節(jié)點(diǎn)都可以綁定事件。 參考： 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85686.html的子標(biāo)簽代表的元素，所以示例中的text in span并不屬于span.children
Text --> CharacterData -- Node -- EventTarget --> Object
1. DOM概述 | MDN
2. Node - Web API Interfaces | MDN
3. NodeList - Web API Interfaces | MDN
4. HTML5中類jQuery選擇器querySelector的使用 - SegmentFault
摘要：放在中減少引起和接下來我們?cè)賮碛懻撘幌聢D片與雪碧圖或精靈，在網(wǎng)頁(yè)中我們會(huì)用到很多圖標(biāo)，如果每一個(gè)圖標(biāo)是單獨(dú)的一張圖片，那網(wǎng)頁(yè)加載的時(shí)候，就會(huì)有多個(gè)請(qǐng)求去請(qǐng)求圖片，顯而易見會(huì)影響網(wǎng)頁(yè)性能，所以要采取方法對(duì)網(wǎng)頁(yè)中圖標(biāo)使用進(jìn)行優(yōu)化處理。 ???????我們都知道性能對(duì)于一個(gè)網(wǎng)站來說相當(dāng)重要，以至于很多公司都會(huì)專門招聘人員優(yōu)化網(wǎng)站性能，網(wǎng)上關(guān)于探討網(wǎng)站性能優(yōu)化的文章也非常多。性能是什么呢？簡(jiǎn)單...
摘要：放在中減少引起和接下來我們?cè)賮碛懻撘幌聢D片與雪碧圖或精靈，在網(wǎng)頁(yè)中我們會(huì)用到很多圖標(biāo)，如果每一個(gè)圖標(biāo)是單獨(dú)的一張圖片，那網(wǎng)頁(yè)加載的時(shí)候，就會(huì)有多個(gè)請(qǐng)求去請(qǐng)求圖片，顯而易見會(huì)影響網(wǎng)頁(yè)性能，所以要采取方法對(duì)網(wǎng)頁(yè)中圖標(biāo)使用進(jìn)行優(yōu)化處理。 ???????我們都知道性能對(duì)于一個(gè)網(wǎng)站來說相當(dāng)重要，以至于很多公司都會(huì)專門招聘人員優(yōu)化網(wǎng)站性能，網(wǎng)上關(guān)于探討網(wǎng)站性能優(yōu)化的文章也非常多。性能是什么呢？簡(jiǎn)單...
摘要：它最主要的目的是為了在或文檔節(jié)點(diǎn)樹中定位節(jié)點(diǎn)所設(shè)計(jì)。選取所有擁有名為的屬性的元素。選取元素的所有元素，且其中的元素的值須大于。實(shí)例路徑表達(dá)式結(jié)果選取元素的所有子元素。如在加載文件的時(shí)候發(fā)生錯(cuò)誤，將拋出，應(yīng)作適當(dāng)處理。 從Xpath說起 什么是Xpath XPath是W3C的一個(gè)標(biāo)準(zhǔn)。它最主要的目的是為了在XML1.0或XML1.1文檔節(jié)點(diǎn)樹中定位節(jié)點(diǎn)所設(shè)計(jì)。XPath是一種表達(dá)式語(yǔ)言，...
摘要：當(dāng)被最接近的列表元素或其子后代元素被點(diǎn)擊時(shí)，會(huì)切換黃色背景定義和用法方法獲得匹配選擇器的第一個(gè)祖先元素，從當(dāng)前元素開始沿樹向上。詳細(xì)說明如果給定表示元素集合的對(duì)象，方法允許我們檢索樹中的這些元素以及它們的祖先元素，并用匹配元素構(gòu)造新的對(duì)象。 w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp 本例演示如何通過 c...
閱讀 1571·2021-11-19 09:55
閱讀 2795·2021-09-06 15:02
閱讀 3564·2019-08-30 15:53
閱讀 1119·2019-08-29 16:36
閱讀 1247·2019-08-29 16:29
閱讀 2298·2019-08-29 15:21
閱讀 636·2019-08-29 13:45
閱讀 2693·2019-08-26 17:15
