dom 元素的查找方式

JavaScript 提供了多种方法可以在 DOM（文档对象模型）结构中查找元素，以下是一些常见的方法：

1. `getElementById(id)`: 通过元素的 id 属性查找元素。每个 id 在一个页面中应是唯一的，所以这个方法总是返回单个元素（或 null，如果没有找到元素）。

2. `getElementsByClassName(className)`: 通过元素的 class 属性查找元素。由于一个页面中可能有多个元素拥有相同的 class，所以此方法返回的是一个 NodeList（即使只找到一个元素，也会返回 NodeList）。

3. `getElementsByTagName(tagName)`: 通过元素的标签名查找元素。此方法也返回一个 NodeList，因为一个页面中通常会有多个相同标签的元素。

4. `querySelector(selector)`: 用 CSS 选择器来查找元素，当有多个匹配时，只返回第一个元素。

5. `querySelectorAll(selector)`: 用 CSS 选择器来查找元素，返回所有匹配的元素作为一个 NodeList。

例子：

```javascript
document.getElementById('myId'); // 返回 id 为 'myId' 的元素
document.getElementsByClassName('myClass'); // 返回所有 class 包含 'myClass' 的元素
document.getElementsByTagName('div'); // 返回所有 'div' 元素
document.querySelector('#myId'); // 返回 id 为 'myId' 的元素
document.querySelectorAll('.myClass'); // 返回所有 class 包含 'myClass' 的元素
```

请注意，返回的 NodeList 不是一个数组，虽然它也有 length 属性和可以通过索引访问元素，但它不具备数组的所有方法，比如 `push`, `pop` 等。如果需要以数组的方式来处理 NodeList，可以将其转换为数组，例如使用 `Array.from(nodeList)` 或者扩展操作符 `[...nodeList]`。