DOM树 (Document Object Model Tree)

最新推荐文章于 2025-08-05 17:55:38 发布

empti_

最新推荐文章于 2025-08-05 17:55:38 发布

阅读量290

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/echo_123qq/article/details/149176015

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

DOM树 (Document Object Model Tree)

DOM树是HTML或XML文档在内存中的表示形式，它是一个树状结构的对象模型，允许程序和脚本动态访问和更新文档的内容、结构和样式。

基本概念

节点(Node): DOM树的基本单位，包括：
- 文档节点(Document)，代表整个HTML文档
- 元素节点(Element)，代表各种标签
- 文本节点(Text)，代表双标签中间的文字
- 属性节点(Attr)，代表元素的各种属性
- 注释节点(Comment)等
层级关系:
- 父节点(Parent)
- 子节点(Child)
- 兄弟节点(Sibling)

DOM树结构示例

对于一个简单的HTML文档：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>标题</h1>
    <p class="content">段落内容</p>
</body>
</html>

对应的DOM树结构大致如下：

Document
└── html
    ├── head
    │   └── title
    │       └── "示例页面"
    └── body
        ├── h1
        │   └── "标题"
        └── p (class="content")
            └── "段落内容"

DOM操作

通过JavaScript可以操作DOM树：

// 获取元素
const para = document.querySelector('p.content');

// 修改内容
para.textContent = '修改后的内容';

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

// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = '新创建的div';

// 添加到DOM树
document.body.appendChild(newDiv);

// 删除元素
const h1 = document.querySelector('h1');
h1.parentNode.removeChild(h1);