Explanation of the difference between JavaScript data element collection and array_javascript skills

The getElementsByName(name) method is to obtain all elements with the name attribute in the page, but the content obtained by this method is different in IE and standard browsers. In IE, the elements obtained by the getElementsByName(name) method have their own name attribute, that is, all the elements listed in the form (these elements themselves have their own name attribute); in standard browsers, getElementsByName The element obtained by the (name) method is an element with the name attribute (it already has this attribute and this attribute is artificially added). So if you use this method to get all the elements with name in the page in IE browser, you can only get out those elements that already have this attribute (form class elements), but those artificially added name attribute elements will not. will be taken out; the standard browser will not do this, it will take out all elements with the name attribute in the page.

What the getElementsByName() and getElementsByTagName() methods have in common is that they will form the obtained page elements into a collection of elements, not an array (although it is an array when printed using console.log() in firebug form). If you use the Object.porototype.toString.apply(arr) method to view the obtained data results, it returns "[object HTMLCollection]" instead of "[object Array]". In this way, the element collection obtained by these two methods cannot be used to call some methods of the array to operate like an array. Instead, this collection needs to be converted. Converting the element collection into an array form can be operated like an array. The elements inside are processed.

This element collection has the following attributes and methods:

1. Element index (index)

2. The length of the element collection (length)

3. item() method: The corresponding elements in the collection can be obtained by passing in different index values. There is no such method under IE.

4. There is also a namedItem(name) method in FF to obtain the first element with the name attribute. This method is only available under FF.

There are many ways to convert a collection of elements into an array form. You can search on the Internet to find many methods. You can also learn a lesson from Situ Zhengmei's blog post "JS Converts Array-like Objects into Array Objects".

The following is an array conversion method:

Copy code The code is as follows:

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);
}

This is a small example, you can see the converted result:

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Element class arrays and arrays</title> <span id="preserve85d7c189f93544d4a971ad0748fffef3" class="wlWriterPreserve"></span> <div name="test" style="width:200px; height:200px; background: red;"> An array is defined in the getElements() function, whose contents are 1, 2, 3, 4, 5, 6 respectively. </div> <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">
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script> function getElements(){ var objArr = document.getElementsByName('test'); var arr = [1, 2, 3, 4, 5, 6]; var array; alert('元素集合的长度: '+ objArr.length); // 在IE下元素集合中的个数不一样 alert('函数所定义的数组类型: '+ Object.prototype.toString.apply(arr)) for(var i in objArr){ alert('元素集合所拥有的属性和方法: '+i+' : '+ objArr[i]+ ' #### 属性和方法的类型：'+ Object.prototype.toString.apply(objArr[i])) } array = makeArray(objArr); alert('集合转换成数组后的类型: '+ Object.prototype.toString.apply(array)) }; 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); } </script>