html querySelector与querySelectorAll

最新推荐文章于 2024-08-28 14:41:59 发布

liqiang94

最新推荐文章于 2024-08-28 14:41:59 发布

阅读量1k

点赞数

分类专栏： Web 文章标签： html dom css w3c

本文链接：https://blog.csdn.net/secret5/article/details/53181385

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

　　 querySelector 与 querySelectorAll 方法是定义在 W3C Selectors API 的方法。根据 CSS 选择器的语法选择 dom 元素。

querySelector
用法：document.querySelector(selectors) 或者 element.querySelector(selector)；

<html>
  <head>
    <title>Selectors API Example</title>
  </head>
  <body>
    <div id="foo">
      <p class="warning">This is a sample warning</p>
      <p class="error">This is a sample error</p>
    </div>
    <div id="bar">
      <p>...</p>
    </div>
    <script>
        var p = document.querySelector("p.warning, p.error");
        console.log("warning:", p.innerText);
    </script>
  </body>
</html>

　说明：querySelector 只获取符合第一个选择模式的元素，多个模式可以用逗号分隔。在上面的例子中也就是 “p.warning” ，即 class 属性值为 “warning” 的 p 标签对象。

querySelectorAll
用法：document.querySelectorAll(selector) element.querySelectorAll(selector)；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selector Demo</title>
</head>
<body>
    <div id="myDIV">
         <h2> It is h2!</h2>
         <h3> It is h3!</h3>
         <h4> It is h4!</h4>
     </div>
   <script>
      var myDiv = document.querySelector("#myDIV");
      var els = myDiv.querySelectorAll("h2, h3, h4");
      for (var i = 0; i < els.length; i++) {
          console.log(i, els[i].innerText);
      }
   </script>
</body>
</html>

说明：querySelector All会获取所有符合选择模式的 dom 元素，以数组的形式返回一个元素集合。在上面的例子中通过 querySelectorAll 获取了所有的 h2, h3 以及 h4 元素。另外，上面的querySelectorAll 也是 element.querySelector(All) 格式的一种使用。