DOM操作之获取元素

2023-09-22 23:53:38

概述

文档对象模型 (DOM) 是 HTML 文档的表示，它允许 JavaScript 代码操作和修改文档中的元素。获取元素是 DOM 操作中最基本的任务之一，可以通过多种方法实现。本文将全面介绍 JavaScript 中获取元素的不同方法，深入探讨它们的优点和局限性。

通过 ID 获取元素

使用元素的 ID 是获取元素最直接的方法。ID 是 HTML 元素的唯一标识符，因此可以通过 document.getElementById() 方法轻松获取。

const element = document.getElementById("my-element");

通过类名获取元素

如果一个元素有多个具有相同类名的同级元素，则 document.getElementsByClassName() 方法可以返回一个包含所有匹配元素的 HTMLCollection。

const elements = document.getElementsByClassName("my-class");

通过标签名获取元素

document.getElementsByTagName() 方法返回一个包含文档中所有具有指定标签名的 HTMLCollection。

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

通过选择器获取元素

CSS 选择器是一种强大的工具，用于匹配和选择 HTML 文档中的元素。document.querySelector() 方法使用选择器查找并返回与指定选择器匹配的第一个元素。

const element = document.querySelector("div.my-class");

document.querySelectorAll() 方法与 querySelector() 类似，但它返回一个包含所有匹配选择器的元素的 NodeList。

const elements = document.querySelectorAll("ul li");

通过其他方法获取元素

除了上述主要方法之外，还有一些其他较少使用的方法可以获取元素：

document.documentElement：返回 HTML 文档的根元素 (<html>)。
document.body：返回文档的 <body> 元素。
document.head：返回文档的 <head> 元素。
element.parentElement：返回元素的父元素。
element.children：返回元素的子元素集合。

性能注意事项

在选择获取元素的方法时，性能是一个重要的考虑因素。一般来说，getElementById()是最快的，因为它是直接查找。getElementsByClassName() 和 getElementsByTagName() 效率稍低，因为它们需要遍历 DOM。querySelector() 和 querySelectorAll() 虽然功能强大，但由于需要处理 CSS 选择器，因此速度最慢。