DOM 完整形式

简介

DOM（Document Object Model，文档对象模型）是一个用于处理 XML 和 HTML 文档的应用程序编程接口（API）。它将整个 HTML 或 XML 页面表示为一个由节点构成的树状结构，提供了一套 API 用于操作这个树状结构，从而实现对文档的访问和操作。 在前端开发中，DOM 是与 JavaScript 最紧密结合的技术之一，它使得 JavaScript 能够动态地改变 HTML 和 CSS 内容，从而实现网页的交互效果。

DOM 树

DOM 树是指将整个 HTML 或 XML 页面表示为一个由节点构成的树状结构，每个节点代表一个元素、属性或文本。树的根是一个 Document 对象，它代表整个文档，而其他节点都是 Document 对象的子节点。DOM 树的结构如下图：

在 DOM 树中，每个元素都有一个标签，标签的名称就是元素的名称。元素可以包含其他元素和文本节点，元素与元素之间可以存在父子关系、兄弟关系和祖孙关系。在 JavaScript 中，可以通过操作 DOM 树来实现以下功能：

• 修改页面内容
• 获取页面内容
• 添加新的元素和属性
• 删除元素和属性
• 修改元素和属性

DOM API

DOM API 是一组由 W3C 定义的标准接口，用于操作 DOM 树。在 JavaScript 中，可以通过以下方式来访问 DOM 树：

// 获取整个文档对象
const doc = document;

// 获取文档的根元素
const root = document.documentElement;

// 获取标题元素
const title = document.title;

// 获取头部元素
const head = document.head;

// 获取主体元素
const body = document.body;

上述代码演示了获取 DOM 树中的一些常见节点的方法，还可以使用其他 DOM API 来获取其他的节点，如 document.getElementById()、document.querySelector()、element.getElementsByTagName()、element.getElementsByClassName() 等。

DOM API 还提供了一些常用的方法来修改元素的内容、属性和样式：

// 修改元素的文本内容
const element = document.getElementById('my-element');
element.textContent = 'Hello, world!';

// 获取元素的属性
const link = document.querySelector('a');
const href = link.getAttribute('href');

// 修改元素的属性
link.setAttribute('href', 'https://www.example.com/');

// 修改样式
link.style.color = 'red';

总结

DOM 是前端开发中最重要的技术之一，它允许开发者使用 JavaScript 动态地操作 HTML 和 CSS 内容。本文介绍了 DOM 树的概念和结构，以及使用 DOM API 访问和修改 DOM 树的方法。只有深入了解 DOM 技术，才能成为一名出色的前端开发者。