0
| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
DOM 树是网页在浏览器内存中的结构化表示形式，它将HTML或XML文档解析为一个由节点组成的树状结构。
DOM定义：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
树状结构：DOM将文档表示为节点树，其中每个节点代表文档的一部分(元素、属性、文本等)。
1230博客
<div>、<p>等class、id等对于一个简单的HTML文档：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>标题</h1>
<p class="intro">段落文本</p>
</body>
</html>
对应的DOM树结构为：
Document
└── html
├── head
│ └── title
│ └── "示例页面"
└── body
├── h1
│ └── "标题"
└── p (class="intro")
└── "段落文本"
JavaScript可以通过DOM API来操作DOM树：
查询节点：
document.getElementById('id')
document.querySelector('.class')
document.getElementsByTagName('div')
修改节点：
element.textContent = '新文本'
element.setAttribute('class', 'new-class')
element.style.color = 'red'
添加/删除节点：
parent.appendChild(newElement)
parent.removeChild(childElement)
事件处理：
element.addEventListener('click', function() {
// 处理点击事件
})
现代前端框架(如React、Vue)使用虚拟DOM来提高性能：
DOM树是Web开发的核心概念，理解DOM结构对于前端开发至关重要。
热门推荐：
0
