JavaScript 數(shù)據(jù)元素集合與數(shù)組的區(qū)別說明
更新時(shí)間:2010年05月06日 21:45:03 作者:
我們?cè)讷@取一組頁面元素時(shí)常會(huì)用到getElementsByName()或是getElementsByTagName()方法。
其中g(shù)etElementsByName(name)方法是獲取頁面中所有具有name屬性的元素,但這個(gè)方法在IE與標(biāo)準(zhǔn)瀏覽器中所取到的內(nèi)容不一樣。在IE中g(shù)etElementsByName(name)方法所取到的元素是其本身就自帶有name屬性也就是form表單中所列出的所有元素(這些元素本身就自帶有name屬性);標(biāo)準(zhǔn)瀏覽器中g(shù)etElementsByName(name)方法所取到的元素是具有name屬性的元素(本身就帶有此屬性+人為添加的此屬性)。所以如果在IE瀏覽器中用此方法來獲取頁面中所有帶有name的元素時(shí),只能取出其自身本來就具有此屬性的那些元素(表單類元素)而那些人為添加的name屬性元素則不會(huì)被取出來;標(biāo)準(zhǔn)瀏覽器則不會(huì)這樣,它會(huì)將頁面中所有帶name屬性的元素全部取出。
getElementsByName()與getElementsByTagName()方法的共同之類是它們會(huì)把所取得的頁面元素組成一個(gè)元素集合并非是數(shù)組(雖然用firebug中的console.log()打印出來時(shí)是數(shù)組的形式)。如果用Object.porototype.toString.apply(arr)方法來查看取得的數(shù)據(jù)結(jié)果時(shí),其返回的是“[object HTMLCollection]”而不是“[object Array]”。這樣一來用這兩種方法所取得的元素集合就不能像使用數(shù)組一樣來調(diào)用數(shù)組的一些方法進(jìn)行操作了而需要將此集合進(jìn)行轉(zhuǎn)換,將元素集合轉(zhuǎn)換為數(shù)組的形式就可以像操作數(shù)組一樣對(duì)里面的元素進(jìn)行處理了。
這個(gè)元素集合具有如下的屬性和方法:
1、元素索引(index)
2、元素集合的長(zhǎng)度(length)
3、item()方法:通過傳入不同的索引值可以取得集合中相應(yīng)的元素。IE下沒有此方法。
4、FF中還有一個(gè)namedItem(name)方法,取得具有name屬性的第一個(gè)元素。只有FF下有這個(gè)方法。
關(guān)于元素集合向數(shù)組形式的轉(zhuǎn)換方法有很多種,大家可以在網(wǎng)上搜索一下就有很多。也可以到司圖正美的這篇《js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象》博文中學(xué)習(xí)一。
以下是一個(gè)數(shù)組轉(zhuǎn)換的方法:
function makeArray(arr){
if(arr.item){
var len = arr.length;
var array = [];
while(len--){
array[len] = arr[len];
}
return array;
}
return Array.prototype.slice.call(arr);
}
這是一個(gè)小例子,可以看一下轉(zhuǎn)換后的結(jié)果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
getElementsByName()與getElementsByTagName()方法的共同之類是它們會(huì)把所取得的頁面元素組成一個(gè)元素集合并非是數(shù)組(雖然用firebug中的console.log()打印出來時(shí)是數(shù)組的形式)。如果用Object.porototype.toString.apply(arr)方法來查看取得的數(shù)據(jù)結(jié)果時(shí),其返回的是“[object HTMLCollection]”而不是“[object Array]”。這樣一來用這兩種方法所取得的元素集合就不能像使用數(shù)組一樣來調(diào)用數(shù)組的一些方法進(jìn)行操作了而需要將此集合進(jìn)行轉(zhuǎn)換,將元素集合轉(zhuǎn)換為數(shù)組的形式就可以像操作數(shù)組一樣對(duì)里面的元素進(jìn)行處理了。
這個(gè)元素集合具有如下的屬性和方法:
1、元素索引(index)
2、元素集合的長(zhǎng)度(length)
3、item()方法:通過傳入不同的索引值可以取得集合中相應(yīng)的元素。IE下沒有此方法。
4、FF中還有一個(gè)namedItem(name)方法,取得具有name屬性的第一個(gè)元素。只有FF下有這個(gè)方法。
關(guān)于元素集合向數(shù)組形式的轉(zhuǎn)換方法有很多種,大家可以在網(wǎng)上搜索一下就有很多。也可以到司圖正美的這篇《js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象》博文中學(xué)習(xí)一。
以下是一個(gè)數(shù)組轉(zhuǎn)換的方法:
復(fù)制代碼 代碼如下:
function makeArray(arr){
if(arr.item){
var len = arr.length;
var array = [];
while(len--){
array[len] = arr[len];
}
return array;
}
return Array.prototype.slice.call(arr);
}
這是一個(gè)小例子,可以看一下轉(zhuǎn)換后的結(jié)果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- js取兩個(gè)數(shù)組的交集|差集|并集|補(bǔ)集|去重示例代碼
- JavaScript獲取兩個(gè)數(shù)組交集的方法
- JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集(多種實(shí)現(xiàn)方式)
- JS數(shù)組交集、并集、差集的示例代碼
- JavaScript獲取多個(gè)數(shù)組的交集簡(jiǎn)單實(shí)例
- javascript數(shù)組元素刪除方法delete和splice解析
- JS在Array數(shù)組中按指定位置刪除或添加元素對(duì)象方法示例
- JS刪除數(shù)組里的某個(gè)元素方法
- js數(shù)組相減簡(jiǎn)單示例【刪除a數(shù)組所有與b數(shù)組相同元素】
相關(guān)文章
JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)JSON合并操作,結(jié)合實(shí)例形式分析了javascript基于遞歸深度實(shí)現(xiàn)json合并操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-09-09JavaScript中逗號(hào)運(yùn)算符介紹及使用示例
這篇文章主要介紹了JavaScript中逗號(hào)運(yùn)算符介紹及使用示例,本文講解了逗號(hào)運(yùn)算符的定義、使用例子及實(shí)際使用的一些技巧,需要的朋友可以參考下2015-03-03Javascript驗(yàn)證上傳圖片大小[前臺(tái)處理]
在做上傳圖片的時(shí)候,如果不限制上傳圖片大小,后果非常的嚴(yán)重。解決這個(gè)問題有兩種方式:后臺(tái)處理、前臺(tái)處理2014-07-07JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過mouseover()實(shí)現(xiàn)圖片變大效果的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄
這篇文章主要介紹了詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07原生JavaScript+LESS實(shí)現(xiàn)瀑布流
這篇文章主要介紹了原生JavaScript+LESS實(shí)現(xiàn)瀑布流的方法,附上了具體實(shí)例,這里推薦給有需要的小伙伴。2014-12-12javascript小組件 原生table排序表格腳本(兼容ie firefox opera chrome)
javascript小組件 原生table排序表格腳本 兼容ie firefox opera chrome,需要的朋友可以參考下2012-07-07