HTML | DOM HTML 对象

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。在使用HTML编写网页时，我们可以通过DOM（Document Object Model）来操作网页元素。

DOM HTML 对象是用于表示 HTML 元素的 JavaScript 对象。它提供了访问和操纵 HTML 元素的属性和方法。程序员可以使用 DOM HTML 对象来动态修改网页内容、样式和行为。

创建 DOM HTML 对象

在 JavaScript 中，我们可以通过多种方式来创建 DOM HTML 对象：

1. 通过标签名称创建 HTML 元素

let element = document.createElement("div");

上述代码创建了一个 <div> 元素，并将其赋值给 element 变量。我们可以继续修改 element 的属性和添加子元素。

2. 通过元素的 ID 获取 HTML 元素

let element = document.getElementById("myElement");

上述代码通过元素的 ID 获取了一个 HTML 元素，并将其赋值给 element 变量。我们可以通过修改 element 的属性来改变该元素的特性。

3. 通过类名获取 HTML 元素

let elements = document.getElementsByClassName("myClass");

上述代码通过类名获取了一个 HTML 元素的集合，并将其赋值给 elements 变量。我们可以通过遍历 elements 来操作每个元素的属性和方法。

操作 DOM HTML 对象

通过获取到的 DOM HTML 对象，我们可以进行各种操作，例如：

修改元素内容

element.innerHTML = "Hello, World!";

上述代码将 HTML 元素的内容修改为 "Hello, World!"。

修改元素样式

element.style.color = "red";
element.style.backgroundColor = "yellow";

上述代码将 HTML 元素的文字颜色修改为红色，背景颜色修改为黄色。

添加/移除 CSS 类

element.classList.add("highlight");
element.classList.remove("selected");

上述代码向 HTML 元素添加了一个名为 "highlight" 的 CSS 类，并移除了名为 "selected" 的 CSS 类。

添加/移除子元素

let newElement = document.createElement("p");
newElement.innerHTML = "New paragraph";
element.appendChild(newElement);

element.removeChild(newElement);

上述代码通过 appendChild() 方法将一个新的 <p> 元素添加为 element 的子元素，然后通过 removeChild() 方法将其从 element 中移除。

总结

DOM HTML 对象提供了丰富的属性和方法，使得我们可以通过 JavaScript 来操纵和修改网页的内容和行为。使用 DOM HTML 对象，我们可以轻松地动态更新网页，增强用户体验。