DOM 基本概念的理解

最新推荐文章于 2023-01-04 22:11:21 发布

nuochen2615

最新推荐文章于 2023-01-04 22:11:21 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

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

6 篇文章

订阅专栏

DOM是XML和HTML文档的API，提供了一种树状结构来表示页面内容。每个页面元素都是一个节点，包括Document、Element和Text等Node子类。文档节点作为树的根，HTML页面中通常由<html>作为文档元素。DOM允许开发者通过节点关系操作和访问页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM 基本概念

文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（API，Application Programming Interface）

DOM是展示和操作HTML和XML文档内容的基础API，其中Document -- XML文档或 HTML文档；Object -- Object对象的属性和方法；Model -- Model模型，DOM 是针对XML或HTML的基于树结构的API

根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得我们可以访问页面其他的标准组件

DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据

如果未熟悉机编程中的树状结构，可借用家谱图来形容DOM，在一个节点之上的直接节点是其父节点，在其下一层的直接节点是其子节点，在同一层上具有相同父节点的节点是兄弟节点，在一个节点之下的所有层级的一组节点是其后代节点，一个节点的任何父节点、祖父节点和其上层的所有节点是祖先节点

图中的每个方框是文档的一个节点，它表示一个Node对象，树形结构的根部是Document节点，它代表整个文档，代表HTML元素的节点是Element节点，代表文本的节点是Text节点，Document、Element和Text是Node的子类，Document和Element是两个重要的DOM类

DOM 创建和使用

保持Web跨平台的天性，浏览器互相兼容，web通信标准的W3C（World Wide Web Consortium，万维网联盟）创建DOM

DOM 节点层次

DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据，每种类型分别表示文档中不同的信息及（或）标记，每个节点都拥有各自的特点、数据和方法，节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构

文档节点是每个文档的根节点，文档节点只有一个子节点，即<html>元素，我们称之为文档元素，每个文档只能有一个文档元素

在HTML页面中文档元素始终都是<html>元素，在XML中没有预定义的元素，因此任何元素都可能成为文档元素

每一段标记都可以通过树中的一个节点来表示，HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示