javascript高级选择器querySelector和querySelectorAll区别

最新推荐文章于 2024-06-12 11:48:08 发布

bluemengcom

最新推荐文章于 2024-06-12 11:48:08 发布

阅读量844

点赞数

分类专栏： jquery javascript 文章标签： querySelector和querySelectorAll

本文链接：https://blog.csdn.net/bluemengcom/article/details/79053557

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

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.οnlοad=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本身。

bluemengcom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级选择器querySelector和querySelectorAll区别

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 Document 蓝梦博客
复制链接

扫一扫

专栏目录