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]`。
标签:返回,NodeList,dom,元素,查找,myClass,id From: https://www.cnblogs.com/coodeshark/p/18051701