高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的
querySelector
功能:该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素,如例:
<div>
<div>
<div>
<p>第三层</p>
</div>
<p>第二层</p>
</div>
<p>第一层</p>
</div>
<script type="text/javascript">
var P = document.querySelector('p'); //结果:<p>第三层</p>
</script>
querySelectorAll
功能:该方法返回所有满足条件的元素,结果是节点集合,查找规则与querySelector方法一样,如例:
<div>
<div>
<div>
<p>第三层</p>
</div>
<p>第二层</p>
</div>
<p>第一层</p>
</div>
<script type="text/javascript">
var P = document.querySelectorAll('p'); //选中顺序:<p>第三层</p> <p>第二层</p> <p>第一层</p>
</script>
选择器格式支持
选择器的书写方式和jQuery完全相同,在性能上,jquerySelector/jquerySelectorAll比jQuery相应选择器的性能更好,不过jquerySelector/jquerySelectorAll只兼顾了jQuery选择器的一部分功能。
选择器格式 | 功能描述 |
* | 匹配所有元素 |
element | 根据给定的元素名匹配所有元素 |
#id | 根据给定的ID匹配一个元素 |
.class | 根据给定的类匹配元素 |
selector, selector | 将每一个选择器匹配到的元素合并后一起返回 |
ancestor descendant | 在给定的祖先元素下匹配所有的后代元素 |
parent>child | 在给定的父元素下匹配所有的子元素 |
prev+next | 匹配所有在 prev 元素后的相邻next 元素 |
prev~siblings | 匹配 prev 元素之后的所有 siblings 元素 |
[attribute] | 匹配包含给定属性的元素 |
[attribute=value] | 匹配给定的属性是某个特定值的元素 |
[attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
[attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
[attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
[attribute][attribute] | 复合属性选择器,需要同时满足多个条件时使用 |
注意:不支持所有的冒号选择器(类似:first-child)以及[attribute!=value]属性选择器
浏览器兼容性
4.0+ | 3.5+ | 8+ | 10.0+ | 3.1+ |
高级选择器querySelector和querySelectorAll的更多相关文章
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- javascript高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...
随机推荐
- iOS segue 跳转
场景描述: 要实现在tableViewController 的界面A里,点击一个cell ,跳转到第二个viewController的界面B .在第二个界面里做相应操作. 我的做法,利用sb,在A 里 ...
- 从个人的角度谈谈本次GNTC大会的收获
GNTC资料:from sdnlab 从个人的角度谈谈本次大会的收获 从本次大会的主题演讲来看,目前SDN.NFV的最前沿已经不再像五年前持观望态度以及探讨,各大运营商.各大厂商已经将SDN.NFV具 ...
- 下载、运行docker
Get the Linux binary To download the latest version for Linux, use the following URLs: https://get.d ...
- thinkphp的save方法失败
如果用下面的方式更新数据时, $data['link_phone'] = I('post.link_phone'); $flag1 = $order->save ($data); $data一定 ...
- oracle EBS 资产定义
一.资产定义也就是江项目任务上的特定(能生成资产的)物料按照一定格式生成资产信息,其中每个独立物料生成一条资产,具体操作步骤如下: 1.省本部库存超级用户系统内生成领料单.审批领料单.最后进行出库处理 ...
- 用户登录验证例题用的ajax
1.登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 【Java IO】FileInputStream 和 FileOutputStream
class FileInputStream extends InputStream implements Closeable
- jdk 8 lambda表达式 及在Android Studio的使用示例
以前觉得java让人觉得有趣的一个特点是支持:匿名内部类,而最近发现jdk8已支持lambda并有更简便的方式,来实现匿名内部类. 这会让程序员更舒服,更喜欢java. 多年前觉得java语法和C#语 ...
- angularJS自定义属性作为条件中转
<html> <head> <meta charset="utf-8"/> <title></title> </h ...
- There has been an error processing your request magento
如果使用magento的过程中,出现以下页面: 说明出现了错误,但是亲,不用紧张,请根据"Error record number:xxxxxxxxx"的数字在网站根目录下的var/ ...