HTML | DOM 选择对象

在 HTML DOM 中，所有的 HTML 元素被视为对象。这些对象可以通过 JavaScript 来访问和操作。在 JavaScript 中，我们可以通过选择器来选择一个或多个 HTML 元素，并对其进行操作。本文将介绍 HTML 元素的选择器和如何使用它们选择对象。

基础选择器

通过标签名选择

可以通过标签名来选择 HTML 元素，例如：

// 选择所有的 <p> 元素
var ps = document.getElementsByTagName("p");

通过 id 选择

可以通过 id 来选择 HTML 元素，例如：

// 选择 id 为 "my-element" 的元素
var element = document.getElementById("my-element");

通过类名选择

可以通过类名来选择 HTML 元素，例如：

// 选择 class 为 "my-class" 的所有元素
var elements = document.getElementsByClassName("my-class");

进阶选择器

通过选择器语法选择

可以使用选择器语法来选择 HTML 元素，例如：

// 选择所有的 <p> 元素中 class 为 "my-class" 的元素
var elements = document.querySelectorAll("p.my-class");

通过父元素选择

可以通过父元素来选择 HTML 元素，例如：

// 选择 id 为 "my-container" 元素下所有的 <p> 元素
var elements = document.querySelector("#my-container").getElementsByTagName("p");

通过相邻元素选择

可以通过相邻元素来选择 HTML 元素，例如：

// 选择在 id 为 "my-element" 元素后面的下一个 <p> 元素
var element = document.querySelector("#my-element + p");

结语

HTML | DOM 选择对象可以让我们通过 JavaScript 来访问和操作 HTML 元素。通过选择器，我们可以选择一个或多个 HTML 元素，并对其进行操作。我们可以选择标签名、id、类名、选择器语法、父元素以及相邻元素来选择 HTML 元素。