JavaScript学习之DOM模型概念

林林一928

已于 2024-04-21 10:15:43 修改

阅读量717

点赞数 10

文章标签： javascript 学习开发语言

于 2024-04-21 10:10:12 首次发布

本文链接：https://blog.csdn.net/m0_73765584/article/details/138023805

版权

要点总结：

定义：DOM是浏览器提供一套专门用来操作网页内容的功能

作用：DOM就是使用 JS 去操作html和浏览器(开发网页内容特效和实现用户交互)

定义（详细描述）

DOM ，全称为“文档对象模型”（Document Object Model），是 JavaScript 操作网页的接口。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）。

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

扩展：

JavaScript分为: 1. ECMAScripts(javaScripts语言基础)

2.Web APIs: 2.1 DOM(页面文档对象类型)

2.2 BOM(浏览器对象模型)

1. 节点（node）

定义：

节点（node）：DOM 的最小组成单位。

文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种

Document：整个文档树的顶层节点（整个文档）

DocumentType：doctype标签（声明：<!DOCTYPE html>）

Element：网页的各种HTML标签（<html></html>,<body></body>,<div></div> ...）

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

2. 节点树

定义：

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。

它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

作用：文档数直观的体现了标签与标签之间的关系。

浏览器原生提供document节点，代表整个文档。

简单演示：

console.log(document)
// 整个文档

除了根节点，其他节点都有三种层级关系

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNodes）：直接的下级节点

同级节点关系（sibling）：拥有同一个父节点的节点

3. Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下：

文档节点（document）：9，对应常量Node.DOCUMENT_NODE

元素节点（element）：1，对应常量Node.ELEMENT_NODE

属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE

文本节点（text）：3，对应常量Node.TEXT_NODE

文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

简单演示：

document.nodeType // 9
document.nodeType === Node.DOCUMENT_NODE // true

了解nodeType属性作用：

能够更高效、精确地进行DOM操作和提高网页性能。

作用（详细描述）：

节点过滤和选择：当你遍历或操作DOM时，通常需要对不同类型的节点进行区分处理。例如，你可能只想操作元素节点而忽略文本节点或属性节点。通过检查nodeType属性，你可以确定节点的类型，并据此执行相应的操作。

性能优化：在进行大量DOM操作时，如果能够准确地定位到特定类型的节点，可以避免不必要的处理，从而提高脚本的执行效率。例如，当删除一个元素时，可能需要先移除该元素的所有子节点。如果这些子节点是文本节点或属性节点，处理方式可能会有所不同。

动态内容处理：在生成动态内容时，如使用AJAX加载数据后更新页面，可能需要创建新的元素节点或文本节点。了解如何通过createElement或createTextNode方法创建特定类型的节点，并知道它们的nodeType，有助于正确地将这些新节点加入到DOM中。

特定节点操作：某些操作可能只对特定类型的节点有效或必要。例如，只有元素节点可以设置属性或应用样式，而文本节点则不能。在添加、修改或删除属性时，识别元素节点是必要的。

复杂DOM结构处理：在处理复杂的DOM结构，如文档片断（DocumentFragment），可以提高向DOM添加多个节点的效率。文档片断允许你在内存中构建一个DOM结构，然后一次性地将它附加到文档中，这通常比单个节点添加更高效。

应用场景示例：

动态内容加载：在使用AJAX从服务器获取数据并动态更新网页内容时，你可能会根据数据类型创建不同的节点（如元素节点或文本节点），并将它们添加到页面的指定部分。
DOM遍历与修改：在一个脚本中，你可能需要遍历一个元素的所有子节点，执行特定操作（如更改元素的文本内容或修改属性）。在这种情况下，正确地识别出元素节点和文本节点是很重要的。
优化性能和处理效率：在一个复杂的DOM操作中，比如重构页面的一个大部分，使用DocumentFragment可以暂存这些变更，并在完成所有修改后，再将这些变更一次性应用到DOM中，这样可以避免多次重绘和重排，从而优化性能。

林林一928

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript学习之DOM模型概念

DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性
复制链接

扫一扫