HTML DOM querySelector() 方法

Document 对象参考手册 Document 对象

获取文档中 id="demo" 的元素：

<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>

尝试一下 »

定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

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

更多 CSS 选择器，请访问我们的 CSS 选择器教程 和我们的 CSS 选择器参考手册。

浏览器支持

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

方法
querySelector() 4.0 8.0 3.5 3.1 10.0

语法

document.querySelector(CSS selectors)

参数值

参数 类型 描述
CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器，使用逗号隔开，返回一个匹配的元素。

提示： 更多 CSS 选择器，请参阅我们的 CSS 选择器参考手册。

技术细节

DOM 版本: Selectors Level 1 Document Object
返回值: 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

更多实例

获取文档中第一个 <p> 元素：

<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
  function myFunction() {
    document.querySelector("p").style.backgroundColor = "red";
  }
</script>

尝试一下 »


获取文档中 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>

尝试一下 »


获取文档中 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>

尝试一下 »


获取文档中有 "target" 属性的第一个 <a> 元素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    a[target] {
      background-color: yellow;
    }
  </style>
</head>
<body>

  <p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色：</p>
  <a href="https://www.mifengjc.com">mifengjc.com</a>
  <a href="http://www.disney.com" target="_blank">disney.com</a>
  <a href="http://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>

尝试一下 »


以下实例演示了多个选择器的使用方法。

<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
  document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

尝试一下 »

相关页面

JavaScript 参考手册: element.querySelector()

Document 对象参考手册 Document 对象