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

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

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

依据 id 查找元素

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

依据 class 查找元素

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

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

代码解释

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

3. 通过 class 查找元素：

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

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