JavaScript中获取DOM元素的方法小结

1. getElementById()

用法：

根据元素的 id 属性获取单个元素。

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

返回值：

返回一个匹配的元素对象，如果没有找到，则返回 null。

适用场景：

适合在页面中唯一标识的元素。由于 id 必须是唯一的，因此返回的总是一个单一元素。

2. getElementsByClassName()

用法：

通过类名获取元素集合（HTMLCollection）。

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

返回值：

返回一个 HTMLCollection 对象，可以通过索引访问各个元素。如果没有找到任何匹配的元素，返回的集合为空。

适用场景：

适用于需要获取同一类名的多个元素，比如一组按钮或列表项。

3. getElementsByTagName()

用法：

通过标签名获取元素集合。

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

返回值：

返回一个 HTMLCollection，包含所有匹配的元素。如果没有找到任何匹配的元素，返回的集合为空。

适用场景：

适用于需要获取特定标签的所有元素，比如所有的或元素。

4. querySelector()

用法：

使用 CSS 选择器获取第一个匹配的元素。

const element = document.querySelector('.myClass'); // 类选择器
const elementById = document.querySelector('#myId'); // ID 选择器
const elementByTag = document.querySelector('div'); // 标签选择器

返回值：

返回一个元素对象，如果没有找到匹配的元素，则返回 null。

适用场景：

非常灵活，适用于根据复杂选择器获取单个元素，如组合选择器、属性选择器等。

5. querySelectorAll()

用法：

使用 CSS 选择器获取所有匹配的元素集合。

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

返回值：

返回一个 NodeList，包含所有匹配的元素。如果没有找到任何匹配的元素，返回的集合为空。

适用场景：

适合获取多个元素，并且可以使用复杂的选择器。

6. children

用法：

获取某个元素的所有子元素（不包括文本节点）。

const parentElement = document.getElementById('parentId');
const children = parentElement.children;

返回值：

返回一个 HTMLCollection，包含所有子元素。如果没有子元素，返回的集合为空。

适用场景：

当需要获取某个元素的直接子元素时使用，方便进行 DOM 操作。

7. firstChild 和 lastChild

用法：

获取某个元素的第一个或最后一个子节点。

const parentElement = document.getElementById('parentId');
const firstChild = parentElement.firstChild;
const lastChild = parentElement.lastChild;

返回值：

返回第一个或最后一个子节点，可能是元素节点或文本节点。如果没有子节点，返回 null。

适用场景：

当需要快速访问某个元素的第一个或最后一个子节点时使用。

8. parentNode

用法：

获取某个元素的父节点。

const element = document.getElementById('myId');
const parent = element.parentNode;

返回值：

返回父节点，如果当前元素没有父节点（例如，它是根元素），则返回 null。

适用场景：

当需要获取某个元素的直接父元素时使用，适用于 DOM 操作。

到此这篇关于JavaScript中获取DOM元素的方法小结的文章就介绍到这了,更多相关JavaScript获取DOM元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！