js querySelector() 使用方法
更新时间:2017年1月9日 10:00 点击:2386
querySelector 定义和用法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
语法
document.querySelector(CSS selectors)
参数值
参数 | 类型 | 描述 |
---|---|---|
CSS 选择器 | String | 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器,使用逗号隔开,返回一个匹配的元素。 |
技术细节
DOM 版本: | Selectors Level 1 Document Object |
---|---|
返回值: | 匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。 |
实例
获取文档中 id="demo" 的第一个元素:
<p id="demo">id="demo" 的 p 元素</p> <p id="demo">id="demo" 的 p 元素</p> <p> 点击按钮修改过第一个 id="demo" 的 p元素内容</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector("#demo").innerHTML = "Hello World!"; } </script>
更多实例
1、获取文档中第一个 <p> 元素:
<p>这是一个 p 与元素。</p> <p>这也是一个 p 与元素。</p> <p>点击按钮修改文档中第一个 p 元素的背景颜色。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector("p").style.backgroundColor = "red"; } </script>
2、获取文档中 class="example" 的第一个元素:
<h2 class="example">class="example" 的标题</h2> <p class="example"> class="example" 的段落。</p> <p>点击按钮为第一个 class="example" 的元素添加背景颜色。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector(".example").style.backgroundColor = "red"; } </script>
3、获取文档中 class="example" 的第一个 <p> 元素:
<h2 class="example">class="example" 的标题</h2> <p class="example">class="example" 的段落。</p> <p>点击按钮为第一个带有 class="example" 的 p 元素添加背景颜色。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector("p.example").style.backgroundColor = "red"; } </script>
4、获取文档中有 "target" 属性的第一个 <a> 元素:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脚本之家</title> <style> a[target] { background-color: yellow; } </style> </head> <body> <p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色:</p> <a href="//www.jb51.net">jb51.net</a> <a href="//www.disney.com" target="_blank">disney.com</a> <a href="//www.wikipedia.org" target="_top">wikipedia.org</a> <p>点击按钮为带有 target 属性的链接添加红色背景。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector("a[target]").style.border = "10px solid red"; } </script> </body> </html>
5、以下实例演示了多个选择器的使用方法。
假定你选择了两个选择器: <h2> 和 <h3> 元素。
以下代码将为文档的第一个 <h2> 元素添加背景颜色:
<h2> h2 元素</h2> <h3> h3 元素</h3> <script> document.querySelector("h2,h3").style.backgroundColor = "red"; </script>
6、但是,如果文档中 <h3> 元素位于 <h2> 元素之前,<h3> 元素将会被设置指定的背景颜色。
<h3> h3 元素</h3> <h2> h2 元素</h2> <script> document.querySelector("h2, h3").style.backgroundColor = "red"; </script>
7、通过获取select的内容实现网址跳转
<select id="language-picker"> <option value="cs">Česky</option> <option value="en">English</option> <option value="es">Español</option> <option value="fr">Français</option> <option value="jp">日本語</option> <option value="pl">Polski</option> <option value="pt">Português</option> <option value="zh" selected>中国的</option> </select> <script> var lang = document.querySelector('#language-picker'); lang.addEventListener('change', function(e) { if (e.target.value === 'en') { window.location = '/'; } else { window.location = '/' + e.target.value; } }); </script>
脚本之家小编提醒:因为ie8以上版本才支持querySelector,请大家酌情使用。
上一篇: 解决拦截器对ajax请求的拦截实例详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了js实现文本框输入文字个数限制代码,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,如何限制,请看本文...2015-12-27
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06