querySelector()和querySelectorAll()
来源:互联网 发布:玩绝地求生网络延迟 编辑:程序博客网 时间:2024/05/19 13:45
在做百度前端任务二的时候,用到querySelector(),特地去查了一下用法。
querySelector()和querySelectorAll()是两个原生的选择符。
querySelector()用于接收一个css选择符,返回与该模式匹配的第一个元素;querySelectorAll()返回所匹配到的所有元素。大家会问已经有getElementById()和getElementsByTagName()了吗,这两个新增加的选择符API意义在哪?
对比而言,query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。
静态是指选出的所有元素的数足不会随着文档操作而改变。
用querySelector操作元素示例如下:
HTML代码:
<ul> <li>111</li> <li>111</li> <li>111</li></ul>var ul=document.querySelector('ul'); var list=ul.querySelectorAll('li'); for(var i=0;i<list.length;i++){ ul.appendChild(document.createElement('li')); }//这个时候就创建了3个新的li,添加在ul列表上。 console.log(list.length) //输出的结果仍然是3,不是此时li的数量6
而getElement方法
var ul=document.getElementsByTagName('ul')[0]; var list=ul.getElementsByTagName('li'); for(var i=0;i<5;i++){ ul.appendChild(document.createElement('li')); } console.log(list.length) //此时输出的结果就是3+5=8
现在我们可以直观看出两者的区别,当然本身两者的兼容性方面也有区别,此外这两种方法都不能查找伪类元素。
阅读全文
0 0
- 再谈querySelector和querySelectorAll
- querySelector和querySelectorAll
- querySelector和querySelectorAll区别
- querySelector()和querySelectorAll()
- javascript中的querySelector()和querySelectorAll()
- DOM元素querySelectorAll和querySelector
- document.querySelector和querySelectorAll方法
- javascript的querySelectorAll()和querySelector()
- element.querySelector() 和 element.querySelectorAll()
- document.querySelector和querySelectorAll方法
- querySelector(),querySelectorAll()
- querySelector、querySelectorAll和CSS3 Selectors一起来
- javascript高级选择器querySelector和querySelectorAll
- javascript高级选择器querySelector和querySelectorAll
- javascript高级选择器querySelector和querySelectorAll
- 浅谈JavaScript高级选择器querySelector和querySelectorAll
- JavaScript高级选择器querySelector和querySelectorAll
- 原生DOM选择器querySelector和querySelectorAll
- 机器学习—使用k-近邻算法改进约会网站的配对效果
- BZOJ 2597: [Wc2007]剪刀石头布 费用流
- 行内元素与块级元素的总结
- Ubuntu14.04 spyder安装 Python2和3切换
- 常用的SQL语句查询练习
- querySelector()和querySelectorAll()
- 产生随机数的方法
- [luogu2723]丑数 Humble Numbers(乱搞)
- 修改fork库名称,不能拉取代码
- Linux常见的压缩命令
- linux多核多进程访问文件示例程序(每个核上运行一个程序)
- Android中判断app何时启动和关闭的技术研究
- 非常优美的弹出提示框SweetAlert
- Token机制的应用及其介绍