【JavaScript】DOM树与DOM对象详解

最新推荐文章于 2024-12-01 07:30:00 发布

Peter-Lu

最新推荐文章于 2024-12-01 07:30:00 发布

阅读量891

点赞数 5

分类专栏： # JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/lph159/article/details/142091476

版权

JavaScript 专栏收录该内容

107 篇文章 11 订阅

订阅专栏

文章目录

DOM（文档对象模型）是Web开发中不可或缺的一部分，负责将网页结构与脚本语言连接起来。DOM树与DOM对象是开发者操控网页内容和布局的基础。本文将详细介绍DOM树的概念、DOM对象的作用及其在网页开发中的应用，帮助你更深入理解前端开发中的关键技术。

一、什么是DOM？

1. DOM的定义

DOM，全称为Document Object Model，中文称为文档对象模型，是一种用于表示HTML、XML文档的编程接口。它将网页结构映射为可编程的对象，开发者通过DOM接口可以动态地修改网页的内容、样式、结构，从而实现动态的网页效果。

DOM是平台无关的，它并不依赖于某种特定的编程语言。现代的Web浏览器提供了对DOM的原生支持，使得JavaScript能够轻松与网页交互。

2. DOM的组成

DOM由一系列的节点（node）构成，每个节点对应HTML或XML文档中的一个元素。这些节点彼此之间通过层级关系组织，形成一个类似树状的结构，因此被称为“DOM树”。

二、DOM树的结构

1. DOM树的定义

DOM树是文档结构的可视化表示，文档的每一个部分都被视作一个节点。DOM树的根节点通常是文档的根元素，例如HTML文档的<html>标签。DOM树自上而下依次包含HTML中的各个元素，每个元素节点都有可能包含子节点。

2. DOM树中的节点类型

在DOM树中，节点可以分为以下几类：

元素节点（Element Node）：对应HTML标签，如<div>、<p>等。
文本节点（Text Node）：表示元素中的文本内容。
属性节点（Attribute Node）：表示HTML元素的属性，例如class、id等。
文档节点（Document Node）：代表整个文档的根节点，通常是<html>元素。

3. DOM树的层次结构

DOM树是以层级关系组织的，每个节点都可以有多个子节点，并且每个子节点都有一个父节点。DOM树结构如下图所示：

<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is an example.</p>
  </body>
</html>

在这个例子中，<html>是根节点，它有两个子节点：<head>和<body>。<body>节点又有两个子节点，分别是<h1>和<p>。

4. DOM树的动态性

DOM树是动态的，开发者可以通过JavaScript操作DOM树，例如添加、删除、修改节点。网页中的每一个元素、文本、属性都可以通过JavaScript进行操作，从而实现动态效果。

三、DOM对象详解

1. DOM对象的概念

DOM对象是浏览器为每个HTML元素创建的JavaScript对象。每个HTML标签在DOM中都对应一个对象，这些对象提供了多种属性和方法，开发者可以通过这些属性和方法与网页进行交互。

例如，document对象代表整个文档，document.getElementById()方法可以用来获取指定的元素对象。

2. 常见的DOM对象

document：表示整个HTML文档的对象，它是所有DOM操作的起点。常见操作包括获取元素、创建新元素、操作事件等。
window：表示浏览器窗口的对象，包含许多控制窗口和全局属性的方法。
element：代表文档中的HTML元素，例如div、p、a等。这些元素对象可以通过多种方法获取，如getElementById()、getElementsByClassName()等。

3. DOM对象的属性与方法

DOM对象提供了丰富的属性和方法，用于操作HTML元素。以下是几个常见的DOM操作示例：

获取元素：
- document.getElementById('id')：根据元素的ID获取元素对象。
- document.getElementsByClassName('class')：根据类名获取元素集合。
- document.getElementsByTagName('tag')：根据标签名获取元素集合。
修改元素内容：
- element.innerHTML：获取或设置元素的HTML内容。
- element.textContent：获取或设置元素的文本内容。
修改样式：
- element.style.property：通过DOM对象直接修改元素的CSS样式。
添加或移除元素：
- element.appendChild(child)：向元素添加子节点。
- element.removeChild(child)：从元素中移除子节点。

四、DOM操作实例

1. 修改元素内容

假设我们有一个简单的HTML结构如下：

<div id="content">初始内容</div>
<button id="changeBtn">点击修改内容</button>

我们可以通过以下JavaScript代码来动态修改div中的内容：

document.getElementById('changeBtn').addEventListener('click', function() {
  document.getElementById('content').textContent = '内容已修改';
});

在这个例子中，我们通过getElementById()方法获取按钮元素，并为其添加一个点击事件。当按钮被点击时，content的文本内容会被修改为“内容已修改”。

2. 动态添加元素

通过DOM操作，我们可以动态地向页面中添加新的元素。例如，我们可以通过以下代码创建一个新的p标签并将其添加到页面中：

let newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新段落';
document.body.appendChild(newParagraph);

在这个例子中，使用createElement()方法创建了一个新的p元素，并将其文本内容设置为“这是一个新段落”。最后，使用appendChild()方法将这个段落添加到了页面的body中。

五、DOM性能优化

1. 减少DOM操作

DOM操作是性能较为消耗的操作，因为每次对DOM的修改都会引发浏览器重新渲染页面。因此，在进行大量DOM操作时，建议尽量减少与DOM的交互，可以通过文档片段（DocumentFragment）批量操作，减少重绘次数。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let newElement = document.createElement('div');
  newElement.textContent = '元素 ' + i;
  fragment.appendChild(newElement);
}
document.body.appendChild(fragment);

2. 使用缓存

在频繁访问某个DOM元素时，可以将该元素缓存到变量中，避免每次都使用getElementById()等方法查找，提高性能。

let content = document.getElementById('content');
content.textContent = '新的内容';

六、总结

DOM树和DOM对象是Web开发的基础，通过它们，开发者能够直接与HTML文档交互，实现动态网页效果。在实际开发中，理解DOM的层级结构、掌握DOM对象的操作方法至关重要。同时，在进行大量DOM操作时，还需考虑性能优化，减少不必要的重绘和回流。

推荐：

JavaScript
react
vue

在这里插入图片描述