getElementsByTagName的详解

今天在看《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个方法都可以使用数组索引来代替。

getElementsByTagName的详解相关推荐

(转)getElementByID getElementsByName getElementsByTagName用法详解
(转)getElementByID getElementsByName getElementsByTagName用法详解 getElementByID getElementsByName getEle ...
getElementsByTagName用法详解
getElementByID getElementsByName getElementsByTagName用法详解 getElementByID getElementsByName getElemen ...
getElementByID getElementsByName getElementsByTagName用法详解
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签: 1.getE ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
php引入路径配置,require.js的路径配置和css的引入方法详解
这篇文章主要介绍了详解require.js配置路径的用法和css的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前 ...
App.Config详解
App.Config详解应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序. 配置文件的根节点是 ...
shell中的mput_FTP命令详解及 shell中的使用
FTP命令详解 FTP的命令格式为:ftp-v-u-d-i-n-g[IP地址]-v显示远程服务器的所有响应信息(verbose:详细,繁冗)-n限制ftp的自动登录,即不使用-d使用调试方式(debu ...
WebService入门详解
1.什么是webservice 先来考虑一个问题,如果我们要在自己的程序里面展示天气预报,那怎么弄?正确的做法是我们发送一个请求到一个系统,他会给我们返回来天气情况.这个就是一个webservice. ...

getElementsByTagName的详解

getElementsByTagName的详解相关推荐

最新文章

热门文章