html5 中高级选择器 querySelector
2024-09-03 08:00:47
简介
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。
用法
两个方法,其中,querySelector返回满足条件的单个DOM元素,按照深度院线和先序遍历的原则使用参数提供的css选择器在DOM中查找。
//返回class为list下,子元素里class为item的首个DOM元素。
element = document.querySelector('.list .item');
//注意参数必须严格符合css选择符规范,比如说元素名、类名和id均不能以数字开头,以下代码出错
document.querySelector('11abc');
//如果类名中有冒号等字符需要经过转义
document.querySelector('test\\:abc')
而querySelectorAll,则是返回满足所有条件的元素,结果是个nodeList集合,查找规则与上面相同。
elements = document.querySelectorAll('.list .item'); //结果是是一个nodeList集合
这里返回的nodeList集合中的元素是非实时的static node list,而getElementsBy系列的返回的是一个live node list。看下面的例子
// for循环 [lis.length] 次,lis.length定下不会再被更新。
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
// append操作将无限循环,每append一次,lis都会随之更新,lis.length+1,达不到循环条件结束。
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
兼容性
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。
最新文章
- Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记)
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现
- 【翻译】Netscaler真实表现性能调整
- Android项目实战(十五):自定义不可滑动的ListView和GridView
- [转][ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
- MongoDB分片集群还原
- 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
- leetcode中一些要用到动态规划的题目
- The reference to entity ";characterEncoding"; must end with the &#39;;&#39; delimiter
- 浏览器的云加速可能导致IP统计异常
- php json_decode返回失败的排查
- JavaScript定时机制、以及浏览器渲染机制 浅谈
- php与微信基础的学习
- Android Things 专题6 完整的栗子:运用TensorFlow解析图像
- VUE环境配置步骤及相关Git Bash命令的使用
- BZOJ 1593: [Usaco2008 Feb]Hotel 旅馆 [线段树]
- Kafka最佳实践
- Do you have an English name? 你有英文名吗?
- AtCoder Grand Contest 031 (AGC031) D - A Sequence of Permutations 其他
- 包建强的培训课程(16):Android新技术入门和提高