今天在看《JavaScript权威指南第六版》根据元素标签获取元素时,有讲到getElementsByTagName返回对象为NodeList,经过测试多个浏览器的运行结果都是HTML集合HTMLCollection。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName</title>
</head>
<body>
<div></div>
<div></div>
<script>
var tagDiv = document.getElementsByTagName("div");
console.log(tagDiv);
var tagAll = document.getElementsByTagName("*");
console.log(tagAll);
</script>
</body>
</html>
返回结果:
谷歌浏览器:
火狐浏览器:
IE9+:
IE8-:输出所有元素时,length是10,不是特别明白,点击查看相信的信息是都是undefined?
苹果浏览器:
safari:
综上返回结果基本都是HTML集合HTMLCollection,IE8-是[object object]。
那么getElementsByTagName到底是什么,他的语法又是什么呢?
1、getElementsByTagName返回给定标签名称的元素HTML集合HTMLCollection。
2、返回的HTML集合是动态的,会随着DOM树的变化自动更新自身。
3、语法:
搜索整个文档节点
Document.getElementsByTagName(tagname);
搜索指定元素的后代,不包括自身
Element.gerElementsByTagName(tagname);
4、tagname代表的是元素名称的字符串,特别字符*代表所有元素。
5、兼容性:截图来源MDN
[1] 火狐19之前本版,该方法会返回一个NodeList
[2] 最初改方法会返回NodeList
6、HTMLCollection定义了属性length和方法item()、namedItem()
length:返回查找元素的长度
item():输入一个整数,返回此索引处的元素。如果不存在,返回null
namedItem():返回指定属性名的元素
以上2个方法都可以使用数组索引来代替。