document查找元素的几种常用方法

2025-05-03 01:14:18 19 分享链接 开发笔记 javascript

在 JavaScript 里,document 对象提供了几种方法用于依据元素的 id 或者 class 来查找元素。下面为你详细介绍这些方法并结合你现有的代码给出示例:

依据 id 查找元素

你可以使用 document.getElementById 方法,它会返回文档里具有指定 id 的第一个元素。若未找到匹配的元素,则返回 null

依据 class 查找元素

  • document.getElementsByClassName:返回一个包含所有具有指定类名的元素的 HTML 集合。
  • document.querySelector:返回文档中匹配指定选择器的第一个元素。若要通过类名查找,可使用 .classname 作为选择器。
  • document.querySelectorAll:返回文档中匹配指定选择器的所有元素的 NodeList。

以下是结合你现有代码添加查找示例的代码块,我会更新到之前的 doubaocanvas 中:

代码解释

  1. 为新创建的 <img> 元素添加 idclass:在创建新的 <img> 元素后,为其设置 idclass 属性。
  2. 通过 id 查找元素:使用 document.getElementById 方法查找具有指定 id 的元素,并将结果存储在 imgById 变量中。
  3. 通过 class 查找元素

    • 使用 document.getElementsByClassName 方法查找具有指定类名的所有元素,并将结果存储在 imgsByClass 变量中。
    • 使用 document.querySelector 方法查找具有指定类名的第一个元素,并将结果存储在 firstImgByClass 变量中。
    • 使用 document.querySelectorAll 方法查找具有指定类名的所有元素,并将结果存储在 allImgsByClass 变量中。
  4. 输出查找结果:对于每个查找结果,检查是否找到元素,并将结果打印到控制台。

通过这些方法,你可以方便地在文档中查找具有指定 idclass 的元素。

document查找元素的几种常用方法