使用 JavaScript 访问 HTML 元素的不同方法

在 web 开发中，我们常常需要使用 JavaScript 操作 HTML 元素。本篇文章将介绍使用 JavaScript 访问HTML 元素的不同方法。

document.getElementById

要访问 HTML 中的元素，一种最常用的方法是使用 document.getElementById 方法。这个方法会根据给定的 ID，返回一个表示该元素的 DOM 对象。

// 获取 ID 为 example 的元素
const exampleElement = document.getElementById('example');

document.getElementsByClassName

除了使用 ID，我们还可以使用类名来访问 HTML 元素。可以使用 document.getElementsByClassName 方法，该方法将根据给定的类名返回一个表示该元素集合的DOM 对象数组。

// 获取类名为 example 的所有元素
const exampleElements = document.getElementsByClassName('example');

document.getElementsByTagName

另一种获取元素的方法是使用 document.getElementsByTagName 。该方法会返回一个表示给定元素标记名称的 DOM 对象数组。

// 获取所有段落元素
const allParagraphs = document.getElementsByTagName('p');

document.querySelector

如果我们需要获取符合某些特定条件的唯一一个元素，可以使用 document.querySelector 方法。该方法接受一个 CSS 选择器作为参数，返回一个表示一个匹配元素的 DOM 对象。

// 获取第一个类名为 example 的元素
const firstExample = document.querySelector('.example');

document.querySelectorAll

如果我们需要获取符合某些特定条件的所有元素，可以使用 document.querySelectorAll 方法。该方法接受一个CSS 选择器作为参数，返回表示所匹配元素的DOM对象集合

// 获取所有类名为 example 的元素
const allExamples = document.querySelectorAll('.example');

总结

使用 JavaScript 访问 HTML 元素并与之交互有许多的方法。document.getElementById 方法是访问单个元素的首选方法，document.getElementsByClassName、document.getElementsByTagName、document.querySelector 和 document.querySelectorAll 方法是获取一组元素的最佳方法。

我们应该根据不同的代码场景来选择使用哪种方法。