【 HTML 及浏览器 】DOM 树
在HTML和浏览器中，DOM（Document Object Model）是文档对象模型的简称，它是一种用于HTML和XML文档的编程接口。DOM将网页或应用程序的标记转换为一个可以通过JavaScript进行访问和操作的对象模型。
DOM树是基于文档的层级结构创建的，它将每个HTML标签视为树中的一个节点。DOM树的根节点是document对象，每个节点都可以包含子节点，这些子节点可以是元素节点、文本节点、注释节点等。
以下是一个简单的HTML示例及其对应的DOM树：
HTML:
<html>
<head>
<title>Example DOM Tree</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>DOM树可以表示为：
document
├── html
│ ├── head
│ │ └── title
│ │ └── "#text" (节点包含文本: "Example DOM Tree")
│ └── body
│ ├── h1
│ │ └── "#text" (节点包含文本: "Welcome to My Website")
│ └── p
│ └── "#text" (节点包含文本: "This is a paragraph.")
└── "#document-fragment"在这个DOM树中，每个元素都是一个节点，#text代表的是元素节点之间的文本内容。#document-fragment是一个虚拟节点，表示整个文档的片段。
通过JavaScript，你可以访问和操作DOM元素，例如：
// 获取页面标题
var title = document.title;
// 改变段落文本
var paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph.';这些基本操作展示了如何通过JavaScript与DOM交互，从而动态地修改网页内容。
评论已关闭