DOM查找元素的方法总结

Irene1991

于 2024-06-04 02:03:09 发布

阅读量320

点赞数 4

分类专栏：学习笔记文章标签： javascript DOM

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/irene1991/article/details/139428015

版权

学习笔记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

最近在用原生js写代码，用习惯了各种框架和语法糖，发现原生的js都忘的差不多了，有些方法还和 jQuery 的方法混淆了，总结一下，慢慢复习吧，常学常新，也注意到了之前忽略的知识。

DOM查找元素的方法

之前学习，资料来源也没有太多讲究，后面发现会有错漏。再次复习就比较重视信息来源的权威性和规范性了。以下思维导图文字内容来源 mdn web docs

代码可以运行看效果，缺失的图片不影响程序结果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="test">DOM查找元素的方法总结</h1>
      <article>
        <p>
          <img src="./img/DOM查找元素的方法总结.png" alt="DOM查找元素的方法总结" />
        </p>
        <br />
        <hr />
        <br />
        <h2>HTMLCollection</h2>
        <p>HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 arguments 相似的类数组 (array-like) 对象），还提供了用来从该集合中选择元素的方法和属性。</p>
        <h2>NodeList</h2>
        <p>NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。</p>
        <h2>HTMLCollection 和 NodeList 的区别</h2>
        <p>
          <img src="./img/HTMLCollection和NodeList的区别.png" alt="HTMLCollection和NodeList的区别" />
        </p>
      </article>
    </div>
    <script>
      var dom = document;
      var test1 = dom.getElementsByClassName("test");
      var test2 = dom.querySelectorAll("h1");
      console.dir(test1); //HTMLCollection
      console.dir(test2); //NodeList
    </script>
  </body>
</html>

不想看代码的看这里