【 HTML 及浏览器】DOM 树

作者：System 时间：2024年08月16日分类：所有,html 字数：1067

在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交互，从而动态地修改网页内容。

【 HTML 及浏览器】DOM 树

评论已关闭

推荐阅读