用原生js获取DOM元素的方法有哪些？

原生 JavaScript 获取 DOM 元素的方法有很多，以下是几种常见的方式：

1. 通过 ID 获取元素:

这是最常见也是最快速的方法，通过元素的 id 属性来获取。

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

// 如果找到该元素，则 element 变量将包含该元素对象；
// 如果未找到，则 element 将为 null。

2. 通过类名获取元素:

通过元素的 class 属性来获取所有具有相同类名的元素。

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

// 返回一个 HTMLCollection，即使只有一个匹配的元素也是如此。
// HTMLCollection 类似数组，但不是真正的数组，可以使用索引访问元素。
// 注意：HTMLCollection 是实时的，DOM 的变化会反映在其中。

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

通过元素的标签名来获取所有相同标签的元素。

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

//  类似于 getElementsByClassName，返回一个实时的 HTMLCollection。

4. 通过 CSS 选择器获取元素 (querySelector 和 querySelectorAll):

这是最灵活的方法，可以使用任何 CSS 选择器来获取元素。

querySelector()：返回匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，则返回 null。

const element = document.querySelector('#myElement'); // 通过 ID
const element = document.querySelector('.myClass');  // 通过类名
const element = document.querySelector('p');       // 通过标签名
const element = document.querySelector('div.myClass p:first-child'); // 更复杂的选择器

querySelectorAll()：返回匹配指定 CSS 选择器的所有元素。返回一个 NodeList，即使没有找到匹配的元素，它也不会是 null，而是一个空的 NodeList。

const elements = document.querySelectorAll('.myClass');
const elements = document.querySelectorAll('p');
const elements = document.querySelectorAll('div.myClass p:first-child');

// NodeList 不是实时的，DOM 的变化不会反映在其中。
// 可以使用 for...of 循环遍历 NodeList。

一些补充说明:

HTMLCollection vs NodeList: getElementsByClassName 和 getElementsByTagName 返回 HTMLCollection，querySelectorAll 返回 NodeList。虽然两者都类似数组，但 NodeList 更通用，并且在处理更复杂的选择器时更有效。 HTMLCollection 是“live”的，这意味着对 DOM 的更改会立即反映在集合中。NodeList 通常是“static”的（但也有例外，例如 querySelectorAll 应用于 :scope 伪类时）。
性能: getElementById 通常是最快的方法，因为它直接通过 ID 查找元素。 querySelector 和 querySelectorAll 比 getElementsByClassName 和 getElementsByTagName 更慢一些，但提供了更大的灵活性。
选择最合适的方法: 如果只需要通过 ID 获取一个元素，getElementById 是最佳选择。如果需要根据类名或标签名获取多个元素，getElementsByClassName 和 getElementsByTagName 是不错的选择。如果需要使用更复杂的 CSS 选择器，querySelector 和 querySelectorAll 是最佳选择。