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
相关阅读
document.all用法 一.document.all是页面内所有元素的一个集合。例如: document.all(0)表示页面内第一个元素二.docum
prep = con.prepareStatement(foreignKeySql1+"000"); ResultSet rs = prep.executeQuery(); if(rs.next()){
学习笔记—document write( )语法、功能、以及需要注
语法:document.write(exp1,exp2,exp3,....)参数解析:(1).expN:可以是一个或者多个参数,如果是多个参数,那么按照顺序写入文档。(如果写入
1. scanf 函数是有返回值的,它的返回值可以分成三种情况 1) 正整数,表示正确输入参数的个数。例如执行 scanf("%d %d", &a, &b)
火坑了,火坑了。今天自己把自己坑惨了。由于需要软件支持断电后重启恢复当时运行状态。故想到将恢复运行状态的一些数据存放到本地