原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
querySelector
querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:
document.getElementById("test");
现在我们来试试使用新方法来获取这个 DIV:
document.querySelector("#test");document.querySelectorAll("#test")[0];
获取文档中 class=”example” 的第一个
元素:
document.querySelector("p.example");
获取文档中有 “target” 属性的第一个 元素:
document.querySelector("a[target]");
使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。
querySelectorAll
该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:
<div id="container"><div></div><div></div></div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了,这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。
document.querySelector("div.test>p:first-child");document.querySelectorAll("div.test>p:first-child")[0];
我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。
var emphasisText = document.querySelectorAll(".emphasis");for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){emphasisText[i].style.fontWeight = "bold";}
这是原生方法,比起jquery速度快
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
转载于:https://www.cnblogs.com/Zhangqwr/p/7998332.html
原生DOM选择器querySelector和querySelectorAll相关推荐
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法 发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
- 执行 this.$destroy()后原生DOM事件也无法执行
在跟随尚硅谷 Vue 全家桶学习视频学习销毁组件实例时,视频中执行 this.$destroy() 后虽然组件实例销毁了,但原生 DOM 事件依然能调用,但实际操作发现不仅组件实例销毁,原生 DOM ...
- android时间选择原生,安卓原生时间选择器
调用Android原生日期选择器对话框也就是DatePickerDialog package com.example.myapplication; import android.app.DatePic ...
- 执行this.$destory()指令后,原生DOM也没有响应的问题
主要问题是vue.js版本的问题 2.7.0及以上版本执行完this.$destory()指令后,原生DOM的响应事件也不会被触发.(个人猜测,7.0版本以后执行完this.$destory()后,原 ...
最新文章
- 设置Enter键为默认键
- 热点话题:全面解析有关网上邻居的内幕
- 开学几天了,还没有进入状态,继续努力
- 3进程状态getrlimit()函数和setrlimit()函数
- 爸爸我爱您(之十二)
- 错误记录:expected single matching bean but found 2
- 怎么用计算机计算年月份,如何使用Excel计算两个日期之间的月数?
- 曾火爆一时的五笔输入法,为什么彻底衰落了?
- Android学习笔记之java中的回调函数
- Nebula3渲染层: Graphics
- IE6,7,8,FF css hack
- find 命令查找-o参数的理解
- 输出分组_数据科学|pandas教程--分组和聚合
- 开票服务器管理系统默认密码,税控盘初始密码和口令是多少-百旺税控盘初始密码和口令-牛账网...
- objective-c感悟(四)class、catagory、class extension、optional
- 一元享移动怎么样_中国移动终于认怂?29元享100G流量还不限速,网友:后悔携号转网了...
- 知乎上40个有趣回复,很精辟
- FutureTask源码解析
- 2005年11月网络工程师试题
- 汇编指令lea 和 mov 区别
热门文章
- android --- fastboot 协议学习
- MS-Sqlserver2008建立维护计划执行备份任务
- RIA之家精华教程和资源集合
- 科发财务凭证登陆出现错误:40002
- Tell me why -- Declan Galbraith
- hyperion卫星重访时间_观摩卫星发射|2020第四届全球物联网大会上让我们一起去“放星”...
- spark任务shell运行_Spark原理与实战(七)部署模式与运行机制
- java stub_Java Stub 研究学习(2)
- JVM初学之堆的内存模型
- apache和mysql 403_如何使用mysql(lamp)分离环境搭建dedecms织梦网站及apache服务器常见的403http状态码及其解决方法...