javascript高级选择器querySelector和querySelectorAll区别

最新推荐文章于 2025-07-08 22:38:53 发布

原创最新推荐文章于 2025-07-08 22:38:53 发布 · 924 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#querySelector和querySelectorAll

javascript 同时被 2 个专栏收录

4 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文介绍了W3C Selectors API规范中的querySelector和querySelectorAll方法，这两种方法能够根据CSS选择器快速定位文档中的指定元素。文章通过示例展示了两种方法的区别：querySelector返回第一个匹配的元素，而querySelectorAll则返回所有匹配的元素。

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="bluemeng">
    <p>蓝梦博客</p>
  	<a href="http://www.bluemeng.com/">蓝梦博客</a>
  	<a href="http://www.bluemeng.com/">蓝梦博客</a>
  	<a href="http://www.bluemeng.com/">蓝梦博客</a>
  </div>
<script>
window.onload=function(){
  var d1 = document.getElementById('bluemeng');
  var obj1 = d1.querySelector('a');
  var obj11 = d1.querySelector('a');
  var obj2 = d1.querySelectorAll('a');
  console.log(obj1);//<p>蓝梦博客</p>
  console.log(obj1.length);//undefind
  console.log(obj11);//<a href="http://www.bluemeng.com/">蓝梦博客</a>
  console.log(obj2.length);//3
}

</script>
</body>
</html>

总结：

（1）querySelector 在文档内找符合选择器描述的节点第一个。

（2）querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身。