在JavaScript中,經(jīng)常需要獲取集合的相關(guān)信息。這里所指的“集合”,包括數(shù)組、節(jié)點(diǎn)集合、表單元素等等。獲取這些集合的方式并不難,但是正確使用需要一定的技巧。下面,我們就來(lái)詳細(xì)講解一下JavaScript中獲取集合的相關(guān)知識(shí)。
首先,我們來(lái)看看獲取數(shù)組的方式。JavaScript中,數(shù)組可以通過(guò)以下兩種方式獲取:
// 第一種方式:通過(guò)字面量創(chuàng)建數(shù)組 var arr1 = ['a', 'b', 'c']; // 第二種方式:通過(guò)Array構(gòu)造函數(shù)創(chuàng)建數(shù)組 var arr2 = new Array('a', 'b', 'c');
其中,第一種方式更簡(jiǎn)潔,也更常見(jiàn)。值得一提的是,數(shù)組的長(zhǎng)度可以通過(guò)length屬性獲取:
var arr = ['a', 'b', 'c']; console.log(arr.length); // 輸出3
接下來(lái),我們來(lái)看看如何獲取節(jié)點(diǎn)集合。在HTML中,節(jié)點(diǎn)集合指的是某一類節(jié)點(diǎn)的集合。例如,獲取所有的p標(biāo)簽可以通過(guò)以下代碼實(shí)現(xiàn):
var pList = document.getElementsByTagName('p');
同樣的,也可以通過(guò)querySelectorAll方法獲取節(jié)點(diǎn)集合。例如,獲取所有class為test的元素可以通過(guò)以下代碼實(shí)現(xiàn):
var testList = document.querySelectorAll('.test');
需要注意的是,通過(guò)getElementsByTagName和querySelectorAll獲取的節(jié)點(diǎn)集合都是類數(shù)組對(duì)象。因此,可以使用類數(shù)組對(duì)象通用的方法進(jìn)行操作。例如:
// 遍歷節(jié)點(diǎn)集合 for (var i = 0; i < pList.length; i++) { console.log(pList[i]); } // 將節(jié)點(diǎn)集合轉(zhuǎn)化為數(shù)組并進(jìn)行操作 var pArray = Array.prototype.slice.call(pList); pArray.forEach(function(item) { console.log(item); });
最后,我們來(lái)看看如何獲取表單元素。獲取表單元素的方式和獲取節(jié)點(diǎn)集合的方式類似,也可以通過(guò)name、id和class等屬性進(jìn)行查找。例如:
// 通過(guò)name屬性獲取所有name為test的input元素 var inputList = document.getElementsByName('test'); // 通過(guò)id屬性獲取某個(gè)具體的元素 var input = document.getElementById('test'); // 通過(guò)class屬性獲取所有class為test的元素 var inputList = document.getElementsByClassName('test');
需要注意的是,通過(guò)name獲取的表單元素是一個(gè)節(jié)點(diǎn)集合,并且是類數(shù)組對(duì)象,因此使用時(shí)需要注意。例如:
// 獲取第一個(gè)元素的值 var value = inputList[0].value; // 遍歷節(jié)點(diǎn)集合 for (var i = 0; i < inputList.length; i++) { console.log(inputList[i].value); }
綜上所述,獲取JavaScript中的集合并不難,但需要根據(jù)實(shí)際情況選擇正確的方式,并注意使用時(shí)的技巧。