HTML | DOM 主体属性

HTML 和 DOM 提供了一些主体属性，可以帮助我们操作和控制文档的结构和内容。

document

document 对象是整个文档树的根节点，代表整个 HTML 文档，它提供了许多属性和方法，可以用来操作和控制文档的结构和内容。

举例来说，我们可以使用 document 的 title 属性来获取或设置当前文档的标题：

// 获取当前文档的标题
const title = document.title;

// 设置当前文档的标题
document.title = "新标题";

另外，我们也可以使用 document 的 getElementById 方法来获取文档中指定 ID 的元素：

// 获取 ID 为 "my-element" 的元素
const element = document.getElementById("my-element");

HTMLElement

HTMLElement 是所有 HTML 元素的基类，它提供了一些属性和方法，可以用来操作和控制元素的样式、属性、内容等。

举例来说，我们可以使用 HTMLElement 的 classList 属性来操作元素的类名：

// 添加一个类名
element.classList.add("my-class");

// 删除一个类名
element.classList.remove("my-class");

// 切换一个类名（如果元素没有该类名则添加，否则删除）
element.classList.toggle("my-class");

另外，我们也可以使用 HTMLElement 的 style 属性来操作元素的样式：

// 修改元素的背景颜色为红色
element.style.backgroundColor = "red";

// 获取元素的宽度和高度
const width = element.offsetWidth;
const height = element.offsetHeight;

Node

Node 是所有文档节点的基类，它提供了一些属性和方法，可以用来操作和控制文档节点的结构和内容。

举例来说，我们可以使用 Node 的 parentNode 属性来获取当前节点的父节点：

// 获取当前节点的父节点
const parent = element.parentNode;

另外，我们也可以使用 Node 的 appendChild 方法来向当前节点的子节点列表的末尾添加一个新的子节点：

// 创建一个新的元素节点
const newElement = document.createElement("div");

// 向当前节点的子节点列表的末尾添加新的子节点
element.appendChild(newElement);

以上是 HTML | DOM 主体属性的一些介绍和示例，它们提供了丰富的接口和功能，可以帮助我们更方便地操作和控制文档的结构和内容。