JavaScript 中如何获取 DOM 元素？

推荐答案

在 JavaScript 中，获取 DOM 元素有多种方法，常用的有以下几种：

1. 通过 id 获取元素：

   const element = document.getElementById('elementId');

2. 通过 class 获取元素：

   const elements = document.getElementsByClassName('className');

3. 通过 标签名 获取元素：

   const elements = document.getElementsByTagName('div');

4. 通过 CSS 选择器 获取元素：

   const element = document.querySelector('.className');
   const elements = document.querySelectorAll('.className');

5. 通过 name 属性获取元素：

   const elements = document.getElementsByName('name');

本题详细解读

1. document.getElementById('elementId')

• 作用：通过元素的 id 属性获取单个 DOM 元素。
• 返回值：返回一个 Element 对象，如果找不到则返回 null。
• 注意：id 是唯一的，因此该方法返回的是单个元素。

2. document.getElementsByClassName('className')

• 作用：通过元素的 class 属性获取一组 DOM 元素。
• 返回值：返回一个 HTMLCollection 对象，包含所有匹配的元素。如果没有匹配的元素，则返回空的 HTMLCollection。
• 注意：HTMLCollection 是动态的，会随着 DOM 的变化而自动更新。

3. document.getElementsByTagName('tagName')

• 作用：通过元素的标签名获取一组 DOM 元素。
• 返回值：返回一个 HTMLCollection 对象，包含所有匹配的元素。如果没有匹配的元素，则返回空的 HTMLCollection。
• 注意：HTMLCollection 是动态的，会随着 DOM 的变化而自动更新。

4. document.querySelector('selector') 和 document.querySelectorAll('selector')

• 作用：通过 CSS 选择器获取元素。
  • querySelector 返回匹配的第一个元素。
  • querySelectorAll 返回所有匹配的元素。
• 返回值：
  • querySelector 返回一个 Element 对象，如果找不到则返回 null。
  • querySelectorAll 返回一个 NodeList 对象，包含所有匹配的元素。如果没有匹配的元素，则返回空的 NodeList。
• 注意：NodeList 是静态的，不会随着 DOM 的变化而自动更新。

5. document.getElementsByName('name')

• 作用：通过元素的 name 属性获取一组 DOM 元素。
• 返回值：返回一个 NodeList 对象，包含所有匹配的元素。如果没有匹配的元素，则返回空的 NodeList。
• 注意：NodeList 是静态的，不会随着 DOM 的变化而自动更新。

总结

• 如果需要获取单个元素，推荐使用 getElementById 或 querySelector。
• 如果需要获取多个元素，推荐使用 getElementsByClassName、getElementsByTagName 或 querySelectorAll。
• 如果需要通过 name 属性获取元素，可以使用 getElementsByName。