HTML DOM - 元素

HTML DOM（文档对象模型）指的是把 HTML 文档看做对象的一种方法，通过它可以访问或者修改 HTML 页面中的所有元素。元素是构成 HTML 页面的基本单元，本文将对 HTML DOM - 元素进行详细介绍。

获取元素

在 HTML DOM 中获取元素有多种方法：

通过 ID 获取元素

document.getElementById(id)

其中 id 是元素的唯一标识符，在 HTML 中通过 id 属性指定。该方法将返回 ID 为 id 的元素。

通过标签名获取元素

document.getElementsByTagName(name)

其中 name 是标签名，该方法将返回所有name标签的元素，以数组的方式返回。

通过类名获取元素

document.getElementsByClassName(className)

其中 className 是元素的类名，该方法将返回类名与 className 相同的所有元素，以数组的方式返回。

通过选择器获取元素

document.querySelector(selector)
document.querySelectorAll(selector)

其中 selector 是 CSS 选择器，document.querySelector(selector) 方法返回第一个与选择器匹配的元素，而 document.querySelectorAll(selector) 方法返回所有与选择器匹配的元素，以 NodeList 的方式返回。

操作元素

在 HTML DOM 中，可以对元素进行以下操作：

属性操作

获取属性值

element.getAttribute(attribute)

其中 attribute 为要获取的属性名，该方法将返回元素的属性值。

设置属性值

element.setAttribute(attribute, value)

其中 attribute 为要设置的属性名，value 为要设置的属性值。

样式操作

获取样式

element.style.styleName

其中 styleName 为要获取的样式属性名，该方法将返回该属性的值。

设置样式

element.style.styleName = value

其中 styleName 为要设置的样式属性名，value 为要设置的样式属性值。

内容操作

获取元素内容

element.innerHTML

该方法将返回元素的所有内容，包括标签。

设置元素内容

element.innerHTML = content

其中 content 为要设置的内容，该方法将替换元素的所有内容。

类名操作

添加类名

element.classList.add(className)

其中 className 为要添加的类名，在添加之前会检测是否已存在。

删除类名

element.classList.remove(className)

其中 className 为要删除的类名，在删除之前会检测是否存在。

切换类名

element.classList.toggle(className)

其中 className 为要切换的类名，在添加或删除之间切换。

总结

HTML DOM - 元素提供了多种方法操作 HTML 页面中的元素，包括获取元素和操作元素等。开发者可以根据实际需求选择不同的方法来操作和管理网页中的元素。