JavaScript 數據元素集合與數組的區別說明

2024-05-06 14:10:09

字體：大中小

來源：轉載

供稿：網友

其中getElementsByName(name)方法是獲取頁面中所有具有name屬性的元素，但這個方法在IE與標準瀏覽器中所取到的內容不一樣。在IE中getElementsByName(name)方法所取到的元素是其本身就自帶有name屬性也就是form表單中所列出的所有元素（這些元素本身就自帶有name屬性）；標準瀏覽器中getElementsByName(name)方法所取到的元素是具有name屬性的元素（本身就帶有此屬性+人為添加的此屬性）。所以如果在IE瀏覽器中用此方法來獲取頁面中所有帶有name的元素時，只能取出其自身本來就具有此屬性的那些元素（表單類元素）而那些人為添加的name屬性元素則不會被取出來；標準瀏覽器則不會這樣，它會將頁面中所有帶name屬性的元素全部取出。

getElementsByName()與getElementsByTagName()方法的共同之類是它們會把所取得的頁面元素組成一個元素集合并非是數組（雖然用firebug中的console.log()打印出來時是數組的形式）。如果用Object.porototype.toString.apply(arr)方法來查看取得的數據結果時，其返回的是“[object HTMLCollection]”而不是“[object Array]”。這樣一來用這兩種方法所取得的元素集合就不能像使用數組一樣來調用數組的一些方法進行操作了而需要將此集合進行轉換，將元素集合轉換為數組的形式就可以像操作數組一樣對里面的元素進行處理了。

這個元素集合具有如下的屬性和方法：

1、元素索引（index）

2、元素集合的長度（length）

3、item()方法：通過傳入不同的索引值可以取得集合中相應的元素。IE下沒有此方法。

4、FF中還有一個namedItem(name)方法，取得具有name屬性的第一個元素。只有FF下有這個方法。

關于元素集合向數組形式的轉換方法有很多種，大家可以在網上搜索一下就有很多。也可以到司圖正美的這篇《js將類數組對象轉換成數組對象》博文中學習一。

以下是一個數組轉換的方法：
代碼如下:
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);
}

這是一個小例子，可以看一下轉換后的結果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>元素類數組與數組</title>  </head> <body> getElements()函數中定義了一個數組，其內容分別是1，2，3，4，5，6  <input type="text" name="test"> <input type="text" name="test"> <input type="button" name="test" value="test1"> <input type="button" name="test" value="test2"> <input type="button" onclick="getElements()" value="getElements">             </SPAN>
</div>
</div>
<div   id="fh9j9rp"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="h3rn3jt"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1043438.html'>javascript 模式設計之工廠模式詳細說明</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1043440.html'>JSQL SQLProxy 的 php 版本代碼</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="xtdbdhz"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流