HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。
注意: querySelector() 方法【仅仅返回】匹配指定选择器的【第一个元素】。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
querySelector()参数类型可以为如下:
指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于【多个选择器,使用逗号隔开】,返回一个匹配的元素。
获取文档中id=”container”的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="contatiner">huang</div> <p class="lover">XXX</p> <a href="https://www.taobao.com" target="_blank">淘宝一下</a> <h2>二级标题</h2> <h3>三级标题</h3> <script type="text/javascript"> var destination = document.querySelector("#contatiner"); var node = document.querySelector("p.lover"); var node2 = document.querySelector("a[target]"); console.log(destination); console.log(node); console.log(node2); document.querySelector("h2,h3").style.backgroundColor = "blue"; </script> </body> </html>
结果:
<div id="contatiner">huang</div>
<p class="lover">XXX</p>
<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
querySelectorAll与querySelector的区别:
querySelectorAll : 找出所有匹配的节点并返回数组.
querySelector : 找到一个后就返回节点对象。
1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。
2、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。
3、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果
找出body标签下的第一个div
document.body.querySelectorAll("div")[0]
找出所有标签
document.querySelectorAll("*")
找出head下所有的标签
document.head.querySelectorAll("*")
找出所有class=box的标签
document.querySelectorAll(".box")
找出所有class=box的div标签
document.querySelectorAll("div.box")
找出所有id=lost的标签
document.querySelectorAll("#lost")
找出所有p标签并且id=lost的标签
document.querySelectorAll("p#lost")
找出所有name=qttc的标签
document.querySelectorAll("*[name=qttc]")
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
找出所有class=hot并且存在name属性的p标签
document.querySelectorAll("p.hot[name]")
document.querySelectorAll("p[class=hot][name]")
相关推荐
先按W3C的规范来说这两个方法应该返回的内容吧,大家先看下官方的解释,然后根据需要选择使用
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录
其实关于querySelector和querySelectorAll的介绍说明很多,在此主要是做个记录
querySelector和querySelectorAll是W3C提供的新的查询接口 querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。 2、...
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 ...
如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 ...
通过利用TypeScript 4.1模板文字类型, querySelector和querySelectorAll函数具有更好的键入功能。 :optical_disk: 安装 npm i -D typed-query-selector :watermelon: 用法 自动补片 您需要做的就是导入此模块,...
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用...
在IE8的新特性里,提到了会支持querySelector()和querySelectorAll()方法,如何使用这里就不说了,只是记录下我在使用时遇到一个问题。
实用程序与当量querySelector , querySelectorAll ,和matches 。 DOM和hast之间的显着区别是DOM节点引用了其父节点,这意味着可以对document.body.matches(':last-child')进行评估。 此信息不会存储在hast中,...
事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极...
这是一个简单的document.querySelector和document.querySelectorAll包装器,使用$符号作为快捷方式,因此,如果您在某个时刻加载了jQuery,则会覆盖jQuery。 目前,在我仅将Chrome定位到我的项目中使用了它,例如...
querySelector()接受一个参数,即一串,并返回与这些选择器匹配的第一个元素。给定一个像 < body > Hello! Goodbye! </ body > 如果我们调用document.querySelector('div') ,则该方法将返回...
标准DOM功能(例如querySelector或querySelectorAll适用于树遍历。 :high_voltage: :high_voltage: 从AngleSharp 0.9迁移到AngleSharp 0.10或更高版本? 查看我们的。 :high_voltage: :high_voltage: 主要特点 可...