js 如何获取元素

在 JavaScript 中，可以通过多种方式获取 HTML 元素，具体方法的选择取决于需求场景。以下是常用的元素获取方法及示例：

使用 document.getElementById() 方法，根据元素的 ID 唯一标识符 获取单个元素。

• 特点：直接、高效，适用于已知 ID 的情况。
• 示例：const element = document.getElementById("my-element");

使用 document.getElementsByClassName() 方法，根据 类名 获取元素集合（HTMLCollection）。

• 特点：返回所有匹配类名的元素，需通过索引访问具体元素。
• 示例：const elements = document.getElementsByClassName("my-class");console.log(elements[0]); // 访问第一个匹配元素

使用 document.getElementsByTagName() 方法，根据 标签名（如 div、p）获取元素集合。

• 特点：返回动态集合，适用于批量操作同类标签。
• 示例：const divElements = document.getElementsByTagName("div");

1. document.querySelector()

   根据 CSS 选择器 获取第一个匹配的元素。

   示例：const firstMatch = document.querySelector(".my-class"); // 第一个类名为 my-class 的元素const nestedElement = document.querySelector("div > p"); // 嵌套在 div 下的 p 元素

2. document.querySelectorAll()

   返回所有匹配选择器的元素集合（NodeList）。

   示例：const allMatches = document.querySelectorAll(".my-class");allMatches.forEach(element => console.log(element)); // 遍历所有匹配元素

使用 parentElement 或 parentNode 属性，从父元素向下查找子元素。

• 特点：适用于已知父子关系的场景。
• 示例：const child = document.getElementById("child");const parent = child.parentElement; // 获取父元素const children = parent.children; // 获取父元素的所有子元素（HTMLCollection）

使用范围方法（如 closest()、contains()）查找与元素具有特定关系的祖先或后代。

1. element.closest()

   获取最近的匹配选择器的祖先元素。

   示例：const element = document.getElementById("my-element");const closestAncestor = element.closest(".ancestor-class");

2. parentElement.contains()

   检查父元素是否包含指定子元素。

   示例：const parent = document.getElementById("parent");const child = document.getElementById("child");console.log(parent.contains(child)); // true 或 false

• document.forms：获取页面中所有 <form> 元素的集合。
• document.images：获取所有 <img> 元素的集合。
• element.matches()：检查元素是否匹配指定选择器。const element = document.getElementById("my-element");console.log(element.matches(".my-class")); // true 或 false

• 单个元素：优先使用 getElementById 或 querySelector。
• 多个元素：使用 getElementsByClassName、getElementsByTagName 或 querySelectorAll。
• 动态关系：通过 parentElement、closest() 或 contains() 处理父子/祖先关系。
• 性能考虑：getElementById 最快，querySelectorAll 稍慢但功能强大。

根据具体需求选择合适的方法，可以高效地操作 DOM 元素。