js querySelector() 使用方法


Posted in Javascript onDecember 21, 2016

querySelector 定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

js querySelector() 使用方法

语法
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="//3water.com">3water.com</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,请大家酌情使用。

Javascript 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS实现图片放大镜插件详解
Nov 06 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
简单实现Vue的observer和watcher
Dec 21 #Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 #Javascript
js实现开启密码大写提示
Dec 21 #Javascript
js实现的在线调色板功能完整实例
Dec 21 #Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 #Javascript
清除输入框内的空格
Dec 21 #Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 #Javascript
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
让焦点自动跳转
2006/07/01 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
js new Date()实例测试
2019/10/31 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
adidas美国官网:adidas US
2016/09/21 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
幼儿园家长评语
2014/02/10 职场文书
投资意向书范本
2014/04/01 职场文书
英文演讲稿
2014/05/15 职场文书
干部鉴定材料
2014/05/18 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android