必威体育Betway必威体育官网
当前位置:首页 > IT技术

document.getElementsByTagName()返回值

时间:2019-10-11 19:14:34来源:IT技术作者:seo实验室小编阅读:89次「手机版」
 

getelementsbytagname

1. 常见问题

document.getElementsByTagName()返回值样式是[…,…,…],很多人误以为是数组,进而对它调用数组方法如sort(),但是这样会报错:TypeERROR:xxx.sort is not a function,因为返回值其实是一个伪数组,像函数arguments也是伪数组。

2. 返回值

<body>
	<p class="box1" id="frame1"></p>
	<p class="box2" id="frame2"></p>

	<script>
		pObjs=document.getElementsByTagName("p");
		console.log(pObjs);
		console.log(Object.prototype.toString.call(pObjs));
	</script>
</body>

在IE8中显示

在这里插入图片描述

在IE11中显示

在这里插入图片描述

在Chrome中显示

在这里插入图片描述

在Firefox中显示

在这里插入图片描述

可见,该方法(除IE8)返回值是HTMLCollection类型,是元素节点集合。这个集合是动态的,它会根据DOM树的变化自动更新,而不必再次调用getElementsByTagName方法更新数据。查看资料发现之前在WebKit 内核浏览器中返回的是NodeList。那么两者有什么不同?

3. HTMLCollection与NodeList区别

NodeList 对象是各节点的集合,而HTMLCollection是元素的集合,显然NodeList范围更广。

NodeList 是由 Node.childNodes 和 document.querySelectorAll 返回。Node.childNodes返回的NodeList与HTMLCollection一样都是动态更新的,而document.querySelectorAll返回的是静态的NodeList,不会自动更新。

二者都有length属性和item(index)方法(该方法等价写法

HTMLCollection[index]/NodeList[index])。而HTMLCollection还有namedItem()方法(该方法等价写法HTMLCollection[id]),根据 id 或name返回指定节点。

4. 解决办法(伪数组转成数组)

如果想对getElementsByTagName()返回值调用数组方法该怎么办?

// 法一:
console.log(Array.prototype.slice.call(pObjs));

// 法二:ES6语法
console.log(Array.from(pObjs));  //此方法IE不支持

// 法三:声明一个空数组,遍历伪数组中的元素添加到空数组中。

在这里插入图片描述


参考文档

Document.getElementsByTagName()

HTMLCollection

NodeList

相关阅读

js document.all用法

document.all用法 一.document.all是页面内所有元素的一个集合。例如:      document.all(0)表示页面内第一个元素二.docum

executeQuery返回值如何判断是否有内容

prep = con.prepareStatement(foreignKeySql1+"000"); ResultSet rs = prep.executeQuery();     if(rs.next()){   

学习笔记—document write( )语法、功能、以及需要注

语法:document.write(exp1,exp2,exp3,....)参数解析:(1).expN:可以是一个或者多个参数,如果是多个参数,那么按照顺序写入文档。(如果写入

scanf 函数的返回值

1. scanf 函数是有返回值的,它的返回值可以分成三种情况 1) 正整数,表示正确输入参数的个数。例如执行 scanf("%d %d", &a, &b)

fwrite() write() 返回值闹出的笑话

火坑了,火坑了。今天自己把自己坑惨了。由于需要软件支持断电后重启恢复当时运行状态。故想到将恢复运行状态的一些数据存放到本地

分享到:

栏目导航

推荐阅读

热门阅读