資訊專欄INFORMATION COLUMN
摘要：是什么它是對象的一個接口，這個接口包含了獲取到的元素集合，返回的類型是。它是及時更新的，當文檔中的變化是，它是會隨之變化的。屬性，返回集合當中子元素的數(shù)目。它有自帶的方法，參數(shù)為下標，返回具體的節(jié)點。需求列表中點擊子級，打印對應(yīng)的下標。
前言
這兩天寫的一個小功能，需要獲取HTMLCollection指定對象的索引，深入研究之后才發(fā)現(xiàn)自己知識域的盲區(qū)，在這里也寫出來記錄一下，希望和我存在同樣困惑的朋友可以一同探討一下。
HTMLCollection是什么：
它是HTML DOM對象的一個接口，這個接口包含了獲取到的DOM元素集合，返回的類型是Object。
它很像數(shù)組，又不是數(shù)組，如果你想使用數(shù)組的一些方法操作這個集合，那么不好意思。
它是及時更新的，當文檔中的DOM變化是，它是會隨之變化的。
屬性：HTMLCollection.length，返回集合當中子元素的數(shù)目。
它有自帶的方法
1.HTMLCollection.item(index)，參數(shù)為下標，返回具體的節(jié)點。
2.HTMLCollection.namedItem(value),參數(shù)為字符串，返回具體的節(jié)點。
什么時候我們會獲取到HTMLCollection對象？
簡單，我們獲取dom元素就會獲取到的。
運行結(jié)果：
3.怎么獲取HTMLCollection對象的下標？
通過HTMLCollection.item(index)和HTMLCollection.namedItem(value)獲取到的都是DOM節(jié)點，那怎么獲取到指定節(jié)點的下標呢，這個官方是沒有提供相應(yīng)的方法的，下面我們通過一個例子實現(xiàn)一下。
需求：ul列表中點擊子級li，打印li對應(yīng)的下標。
說下我的初始想法，既然HTMLCollection是個對象，那么indexof這種操作顯然很瞎，既然不能使用數(shù)組的方法控制它，那我就把它編程數(shù)組，然后就用for循環(huán)balabala....寫了一大堆，將它轉(zhuǎn)為數(shù)組，再寫點擊事件查找下標，效果實現(xiàn)是實現(xiàn)了，可特么太費勁了，看看這代碼量
var lis= document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
//=======================看下面==========================
var newArr = [];
for(var i in lis){
newArr.push(lis[i])
}
//=======================看下面==========================
//事件委托綁定事件
ul.onclick = function(e){
var even = e||event;
var target = even.target;
if(target.nodeName.toLowerCase() == "li"){
//=======================看下面==========================
var index = newArr.indexOf(target)
return index;
//=======================看下面==========================
}
}
emmmm......兩次循環(huán)，效果實現(xiàn)
現(xiàn)在換種方法，直接操作HTMLCollection對象
var arr= document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(e){
var even = e||event;
var target = even.target;
if(target.nodeName.toLowerCase() == "li"){
//=======================看下面==========================
for(var k in arr){
if(arr[k] == target)return k;
}
//=======================看上面==========================
}
}
good~~~ 一次循環(huán)就搞定，這是我目前想到的最合理的方法，對
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94258.html
摘要：五的子類對象會返回一個集合對象，集合內(nèi)存儲類型的元素。七的子類初看很有可能以為集合元素就是單選表單元素，其實可以存儲任意類型的表單元素。八的子類開始，將返回子類的對象，其行為特征和一致。但在前，我們應(yīng)該先了解清楚的類型的特征。 一、前言 大家先看看下面的js，猜猜結(jié)果會怎樣吧！ 可選答案： ①. 獲取id屬性值為id的節(jié)點元素 ②...
摘要：小結(jié)這下我們可以得出結(jié)論了個屬性返回的對象不止能遍歷到子元素，還能遍歷到來自其原型的三個屬性。既要防止那些添加修改了原型屬性的對象遍歷出多余的的結(jié)果，也要防止類似這種非標準屬性返回一個屬性的枚舉性不可控的對象的坑。 問題的引出 關(guān)于DOM元素的children屬性，以前我只在意它和childNodes屬性的區(qū)別：即children屬性只會返回子元素節(jié)點集合，而childNodes返回的...
摘要：原文發(fā)布在我的獨立博客上從選擇器的返回值說起拋開大大解放生產(chǎn)力的，使用獲取元素要使用方法，或類似的，第一種情況下，根據(jù)獲取時，返回值是唯一的元素而根據(jù)等獲取時候，返回值是包含所有符合條件的多個元素的列表。 原文發(fā)布在我的獨立博客上 ~： 從DOM選擇器的返回值說起 拋開大大解放生產(chǎn)力的jQuery，使用JS獲取元素要使用getElementById方法，或類似的getElem...
摘要：文本整理了操作的一些常用的，根據(jù)其作用整理成為創(chuàng)建，修改，查詢等多種類型的，主要用于復(fù)習基礎(chǔ)知識，加深對原生的認識。方法主要是用于添加大量節(jié)點到文檔中時會使用到。 文本整理了javascript操作DOM的一些常用的api，根據(jù)其作用整理成為創(chuàng)建，修改，查詢等多種類型的api，主要用于復(fù)習基礎(chǔ)知識，加深對原生js的認識。 基本概念 在講解操作DOM的api之前，首先我們來復(fù)習一下一些基...
摘要：方式二使用通過名獲取元素錯誤代碼結(jié)果錯誤原因頁面上的取名不是唯一的，是可以重復(fù)的。就算頁面上面只有一個，它的返回值依舊是集合。需求二獲取頁面中為的的第一層子級。返回值也是一個類似數(shù)組的集合。 1.使用JS獲取頁面中某個元素的4種方法 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document.getElements...
閱讀 2610·2021-11-17 09:33
閱讀 3966·2021-10-19 11:46
閱讀 921·2021-10-14 09:42
閱讀 2266·2021-09-22 15:41
閱讀 4240·2021-09-22 15:20
閱讀 4648·2021-09-07 10:22
閱讀 2320·2021-09-04 16:40
閱讀 826·2019-08-30 15:52
