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 相关文章推荐
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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
我的论坛源代码(十)
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue实现文件上传功能
2018/08/13 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
群胜软件Java笔试题
2012/09/29 面试题
学期自我评价
2014/01/27 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
品德评语大全
2014/05/05 职场文书
基层党员对照检查材料
2014/09/24 职场文书
中学推普周活动总结
2015/05/07 职场文书
我是特种兵观后感
2015/06/11 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2015年度女工工作总结
2015/10/22 职场文书
创业计划书之美容店
2019/09/16 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript