js querySelector() 使用方法

更新时间：2016年12月21日 14:20:13 投稿：mdxy-dxy

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代

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，请大家酌情使用。

您可能感兴趣的文章:

最实用的JS数组函数整理
本篇文章小编给大家整理了非常全的JS数组函数以及相关的写法规则，希望能够对读者们起到帮助和参考。
2017-12-12
浅析JavaScript中的事件机制
这篇文章主要介绍了JavaScript中的事件机制,即JS与HTML的一般交互,需要的朋友可以参考下
2015-06-06
js控制CSS样式属性语法对照表
CSS与JS紧密配合，为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性
2012-12-12
Javascript学习笔记3 作用域
每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。
2010-01-01
详解Bootstrap 学习（一）入门
这篇文章主要介绍了Bootstrap入门学习，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
W3C Group的JavaScript1.8 新特性介绍
在了解了JavaScript1.7的相关更新后，我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScript系列特性文章中，JavaScript1.8的更新相对较少！
2009-05-05
THREE.JS入门教程(1)THREE.JS使用前了解
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D,本文介绍下THREE.JS基础/浏览器支持/设置场景/构建网格表面/材质/光/渲染循环/通用的对象属性等等，感兴趣的朋友可以了解下哦
2013-01-01
JSON的语法与规则详解
这篇文章主要介绍了JSON的语法与规则详解,Web API可以接收JSON格式的数据，也可以返回JSON格式的数据。在接收JSON 数据时，需要使用相应的库或框架来解析JSON数据，在返回JSON数据时，可以使用相应的库或框架将数据转换为JSON格式
2023-07-07
怎么通过onclick事件获取js函数返回值（代码少）
这篇文章主要介绍了怎么通过onclick事件获取js函数返回值,需要的朋友可以参考下
2015-07-07
javascript学习笔记(十五) js间歇调用和超时调用
javascript学习笔记之js间歇调用和超时调用介绍，学习js的朋友可以参考下
2012-06-06