NodeList 與 HTMLCollection 二三事

melody_lql 發布于2019-08-22 11:09 / 3395人閱讀

摘要：結構如下是的返回結果是的結果不要在意兩個數量的區別，首先是快照，節點數量和類型的快照，就是對節點增刪，感覺不到，但是對節點內部內容修改，是可以感覺到的，比如修改是綁定的，節點的增刪是敏感的可寫性問題直接對，進行賦值，是失敗的元素是可讀的，是

Dom 結構如下：

    
        1.dsfs
        2.dsfs
        3.dsfs
        5.dsfs
        4.dsfs
        6.dsfs
        7.dsfs
        8.dsfs

1.NodeList 是 querySelectorAll 的返回結果

2.HtmlCollection 是 getElementByTagName的結果

3.不要在意兩個數量的區別，

首先NodeList 是DOM 快照，節點數量和類型的快照，就是對節點增刪，NodeList 感覺不到，但是對節點內部內容修改，是可以感覺到的，比如修改innerHTML;
HtmlCollection 是live綁定的，節點的增刪是敏感的；

4.可寫性問題

1.直接對NodeList， HtmlCollection進行賦值，是失敗的

2.元素是可讀的，是對dom節點的引用

> var ef = lis[1]
< undefined
> ef 
< ?2.dsfs??
> lis[1] = ef
< ?2.dsfs??
> Object.prototype.toString.call(ef)
< "[object HTMLLIElement]"

3.然后我就想將NodeList,或者HtmlCollection 排個序啥的，很常見的需求
既然直接修改不行，那我先存到數組

轉換過后可行,下面直接進行排序

> lis = document.querySelectorAll("li");
< (8) [li, li, li, li, li, li, li, li]
> myDiv.innerHTML = Array.from(lis).sort((a,b)=>parseInt(b.innerHTML)-parseInt(a.innerHTML)).map((item)=>item.outerHTML).join("");

完美降序排序
在用HTMlCollection來實現一下升序，完美；

..]

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

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

與dom事件流相關的二三事

摘要：但對于整個事件流上的別的元素來說，執行順序還會受到另外一個因素的影響。以上面的場景為例，在捕獲階段執行的事件，如果執行，則事件流終止，不會到達目標階段，的世界則不會被執行執行結果為線上參考事件流向dom綁定事件的事件的三種方式行內綁定按鈕 js內綁定 btnDom.onclick = function clickHandler() { console.log(click)...

Anleb 2019-08-23 12:54 評論0 收藏0
HTMLCollection與NodeList

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

msup 2019-08-01 15:41 評論0 收藏0
HTMLCollection與NodeList

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

yanwei 2019-08-20 10:40 評論0 收藏0
數組方法的二三事

摘要：常用的數組方法刪除數組的最后一個元素，返回被刪除的元素，原數組長度減。原數組發生了變化，但沒有創建新的數組。將指定數組進行排序，返回排好序的數組。顛倒數組元素的順序，返回逆序后的數組。數組，對于每一個前端人員來說是非常常見且重要的數據結構之一，也是面試常常出現的題目，掌握數組的方法能幫助我們更高效地處理問題。不過在數組的學習中，我們常常會混淆數組本身的方法和Javascript提供的...

VincentFF 2019-08-23 14:37 評論0 收藏0