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

資訊專欄INFORMATION COLUMN

HTMLCollection與NodeList

msup / 531人閱讀

摘要:唯一要注意的是返回的雖然是,但是實際上是元素集合,并且是靜態(tài)的其他接口返回的和都是的。與相同的是它也是一個動態(tài)的集合,與不同的是,中保存的是一組無序的屬性節(jié)點的集合。及以下版本瀏覽器中,注釋屬于算作因此會出現(xiàn)在里。而且是元素的集合。

NodeList v.s. HTMLCollection

主要有兩個方面不一樣
1.包含節(jié)點的類型
2.使用方法

1.包含節(jié)點的類型不同(重要)

(1)NodeList
一個節(jié)點的集合,既可以包含元素和其他節(jié)點(注釋節(jié)點、文本節(jié)點等)。
(2)HTMLCollection
元素集合, 只有Element

2.使用方法

相同點:
1)    它們都有l(wèi)ength屬性
2)    都有元素的getter,叫做item,可以傳入索引值取得元素。
3)    都是類數(shù)組
不同點:
HTMLCollection還有一個nameItem()方法,可以返回集合中name屬性和id屬性值的元素。(部分瀏覽器也支持NodeList的nameItem()方法)
詳細講解

涉及獲取元素的主要API
DOM最初設(shè)計是為了解析XML而設(shè)計的,之后沿用到HTML上。我們可以把DOM分為兩部分 core 和 html,Core 部分提供最基礎(chǔ)的 XML 解析API說明,HTML 部分專為 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中體現(xiàn)的,HTMLCollection則是在html部分,不同瀏覽器也會實現(xiàn)它們的不同接口。但是現(xiàn)在的dom標準已經(jīng)不分core和html了,反映的是瀏覽器的實現(xiàn)()。唯一要注意的是 querySelectorAll 返回的雖然是 NodeList ,但是實際上是元素集合,并且是靜態(tài)的(其他接口返回的HTMLCollection和NodeList都是live的)。
DOM中的NodeList NamedNodeMap 及 HTMLCollection
把這三個放在一起說,是因為三者都是DOM中的array-like對象,即類數(shù)組對象(因而也都具有l(wèi)ength屬性)。
(1)先說NamedNodeMap這個對象,這個比較簡單,雖然翻譯過來是 命名的節(jié)點映射,但它只不過是 Attr這個對象的一個集合,Attr對象是DOM元素節(jié)點的屬性的對象表達。通過元素節(jié)點(element node)的attributes屬性返回的就是NamedNodeMap這個對象。與NodeList相同的是它也是一個動態(tài)的集合(live collection),與NodeList不同的是,NamedNodeMap中保存的是一組無序的屬性節(jié)點的集合。
(2)NodeList對象是由childNodes屬性,querySelectorAll方法返回的一組節(jié)點的集合,它保存著一組有序的節(jié)點。注意區(qū)別的是,由childNodes屬性返回的NodeList對象是一個動態(tài)的集合(live collection), 而由querySelectorAll方法返回的則是一個靜態(tài)的集合(static collection)。因而在MDN中將他定義為 ”A sometimes-live collection“,live collection 指的是對對DOM的操作引起的的變化會實時的反映在這個集合里。
(3)接下來就是HTMLCollection,它在本質(zhì)是一個動態(tài)的NodeList對象。getElementsByTagName等方法返回的是包含零或多個元素的NodeList,在HTML文檔中,返回的則是HTMLCollection對象。因此說它在本質(zhì)上一個NodeList對象,包含一組有序(in document order基于文檔結(jié)構(gòu)順序)的動態(tài)集合。

在獲取原生DOM元素的時候,主要涉及這幾個DOM API(鏈接為Living Standard):

?    Node及對應(yīng)集合NodeList
?    Element(繼承Node)及對應(yīng)集合HTMLCollection
?    Document(繼承Node)

注:計劃取代NodeList和HTMLCollection的Elements目前并無廣泛實現(xiàn)

基礎(chǔ)知識 -- NodeList v.s. HTMLCollection
使用Node Interface的方法,如childNodes,得到的通常是NodeList,而使用其他Interface的方法,又有可能得到HTMLCollection。所以有必要了解一下這兩者的區(qū)別。
關(guān)于這兩個類型的差異,在Stackoverflow上有一個不錯的問答。
其實,只要先看看Living Standard中這兩個類型的IDL,便能猜出大概了。NodeList的IDL如下:

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable;
};

而HTMLCollection的IDL如下:

interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

相同點:
4) 都是類數(shù)組對象
5) 它們都有l(wèi)ength屬性
6)都有元素的getter,叫做item
不同點:
1.NodeList的元素是Node,HTMLCollection的元素是Element。

Element繼承自Node,是Node的一種,在HTML中,它一般是HTML元素(比如

之類的標簽創(chuàng)建出來的對象)。而Node作為父類,除了Element還有一些其他子類,比如HTML元素內(nèi)的文本對應(yīng)的Text,文檔對應(yīng)的Document,注釋對應(yīng)的Comment。HTMLCollection里,只有Element,而NodeList里可以有Element、Text、Comment等多種元素。按說如果獲取元素返回的列表里只有Element,那這兩種類沒多大區(qū)別,但事實上很多時候瀏覽器會將解析HTML文本時得到的Text和Comment一并放進列表里放回。比如說下面這一段代碼

This is Some Text

若將這個div的子元素放在列表里返回,那么如果是作為NodeList返回,瀏覽器最多可以給這個列表5個元素(不同瀏覽器可能不同)

1.    一個
和注釋間的斷行和空格(或tab)作為text node(沒錯,標簽之間的空白符號也可以被解析為text node) 2. 注釋作為comment node 3. 注釋和

之間的斷行和空格(或tab)作為text node 4. p作為element 5.

之間的斷行和空格(或tab)作為text node

因此NodeList里可能會有很多一般DOM操作不需要的text node和comment node需要處理。而HTMLCollection則簡單多了,只有

這一個元素,這也是比較符合大多數(shù)人直覺的結(jié)果。
2.HTMLCollection還有一個namedItem方法,可以快速獲取其中元素。假設(shè)有這樣一段HTML:

This is Some Text

那么假設(shè)得到了這個div的子元素構(gòu)成的HTMLCollection,叫做list,那么使用list.namedItem("test")就可以直接得到里面的img元素。
查找順序參考Living Standard,但是在現(xiàn)實中不是所有瀏覽器都遵循標準。比如標準規(guī)定如果有多個擁有相同id或者name的元素,只要返回第一個,但chrome和opera會將它們放在一個HTMLCollection或者NodeList里一并返回,參見MDN。
從IDL看不出來的還有如下幾點

1.    這兩個類都是“l(fā)ive”的。對其中元素進行操作,會實時反映到DOM中(也因此如果一次性直接在這類列表上進行多個DOM操作的話,帶來的開銷會很大)。
2.    item和namedItem都可以通過[]的縮寫進行調(diào)用,有的瀏覽器還支持用()的縮寫進行調(diào)用(也就是可以list[index],list[key]或者list(index),list(key)),以及直接用dot notation調(diào)用namedItem(比如list.key)。
3.    部分瀏覽器支持對NodeList調(diào)用namedItem或間接通過[]、()、dot notation來調(diào)用namedItem,但由于各瀏覽器支持不同,最好不對NodeList做這種操作。
4.    IE8及以下版本瀏覽器中,注釋屬于HTMLCommentElement,算作Element,因此會出現(xiàn)在HTMLCollection里。

NodeList
  NodeList是一個節(jié)點的集合(既可以包含元素和其他節(jié)點),在DOM中,節(jié)點的類型總共有12種,通過判斷節(jié)點的nodeType來判斷節(jié)點的類型。
  我們可以通過Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多,這里不一一列舉,下同)來獲取到一個NodeList對象。
  NodeList對象有個length屬性和item()方法,length表示所獲得的NodeList對象的節(jié)點個數(shù),這里還是要強調(diào)的是節(jié)點,而item()可以傳入一個索引來訪問Nodelist中相應(yīng)索引的元素。

1 
 2     
3 文本節(jié)點 4 5 node1 6 node2 7 node3 8
9 10

  上面的HTML代碼中,“文本節(jié)點”和父節(jié)點子節(jié)點的空格(連著的文本)算做一個文本節(jié)點,然后是一個注釋節(jié)點和注釋節(jié)點和元素節(jié)點之間的空格(換行會產(chǎn)生空格,空格算做文本節(jié)點)的文本節(jié)點,緊接著的是一個元素節(jié)點和元素節(jié)點之間的換行的文本節(jié)點,三個元素節(jié)點和元素節(jié)點間的兩個文本節(jié)點,最后是最后得元素節(jié)點和父元素之間的空格產(chǎn)生的文本節(jié)點,總共是9個節(jié)點。
  NodeList對象的一大特點是它返回的內(nèi)容是動態(tài)的(live),也就是說我們上面代碼獲取nodeLists是類似于“指針”的東西,所以在下面代碼中我們在獲取了nodeLists之后再向node中插入一個創(chuàng)建的span標簽后,發(fā)現(xiàn)獲取到了nodeLists.length變?yōu)?0了,但是querySelectorAll這個接口返回的nodeList對象比較特殊,它是個靜態(tài)(static)的對象。而且是元素的集合。

1 
 2     
3 文本節(jié)點 4 5 node1 6 node2 7 node3 8
9 10

  HTMLCollection
  HTMLCollection是元素集合,它和NodeList很像,有l(wèi)ength屬性來表示HTMLCollection對象的長度,也可以通過elements.item()傳入元素索引來訪問。當時它還有一個nameItem()方法,可以返回集合中name屬性和id屬性值得元素。HTMLDocument 接口的許多屬性都是 HTMLCollection 對象,它提供了訪問諸如表單、圖像和鏈接等文檔元素的便捷方式,比如document.images和document.forms的屬性都是HTMLCollection對象。

 1 
 2     
 3     
 4     
 5     
 6     
 7     
 8 
 9 

  HTMLCollection的集合和NodeList對象一樣也是動態(tài)的,他們獲取的都是節(jié)點或元素集合的一個引用。
  HTMLCollection和NodeList的實時性非常有用,但是,我們有時要迭代一個NodeList或HTMLCollection對象的時候,我們通常會選擇生成當前對象的一個快照或靜態(tài)副本:
轉(zhuǎn)換為數(shù)組類型:
var staticLists = Array.prototype.slice.call(nodeListorHtmlCollection, 0)
 這樣的話,我們就可以放心的對當前的DOM集合做一些刪減和插入操作,這個在DOM密集操作的時候很有用。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50053.html

相關(guān)文章

  • HTMLCollectionNodeList

    摘要:唯一要注意的是返回的雖然是,但是實際上是元素集合,并且是靜態(tài)的其他接口返回的和都是的。與相同的是它也是一個動態(tài)的集合,與不同的是,中保存的是一組無序的屬性節(jié)點的集合。及以下版本瀏覽器中,注釋屬于算作因此會出現(xiàn)在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有兩個方面不一樣1.包含節(jié)點的類型2.使用方法 1.包含節(jié)點的類型不同(重要) (1)Nod...

    yanwei 評論0 收藏0
  • 詳解NodeListHTMLCollection 和 Array

    摘要:展開的屬性后發(fā)現(xiàn),繼承于一個對象,而這個對象又繼承于對象。這證實了我們對的猜想。是比較新的模型,相比更加完善,不光有元素,還有節(jié)點和。關(guān)于,和的關(guān)系,就是長得像,有個別相似的功能,但是是完全不一樣的東西。 Array,NodeList, HTMLCollection這三個概念和它們之間的關(guān)系有很多做了幾年前端的同學(xué)都搞不清楚,經(jīng)常遇到但是又感覺很陌生,剪不斷理還亂的感覺。今天咱們就來理...

    xietao3 評論0 收藏0
  • 詳解NodeListHTMLCollection 和 Array

    摘要:展開的屬性后發(fā)現(xiàn),繼承于一個對象,而這個對象又繼承于對象。這證實了我們對的猜想。是比較新的模型,相比更加完善,不光有元素,還有節(jié)點和。關(guān)于,和的關(guān)系,就是長得像,有個別相似的功能,但是是完全不一樣的東西。 Array,NodeList, HTMLCollection這三個概念和它們之間的關(guān)系有很多做了幾年前端的同學(xué)都搞不清楚,經(jīng)常遇到但是又感覺很陌生,剪不斷理還亂的感覺。今天咱們就來理...

    sherlock221 評論0 收藏0
  • NodeList HTMLCollection 二三事

    摘要:結(jié)構(gòu)如下是的返回結(jié)果是的結(jié)果不要在意兩個數(shù)量的區(qū)別,首先是快照,節(jié)點數(shù)量和類型的快照,就是對節(jié)點增刪,感覺不到,但是對節(jié)點內(nèi)部內(nèi)容修改,是可以感覺到的,比如修改是綁定的,節(jié)點的增刪是敏感的可寫性問題直接對,進行賦值,是失敗的元素是可讀的,是 Dom 結(jié)構(gòu)如下: 1.dsfs 2.dsfs 3.dsfs 5.dsf...

    melody_lql 評論0 收藏0

發(fā)表評論

0條評論

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