理解DOM：节点操作与模型解析

需积分: 10 90 浏览量更新于2024-08-08 收藏 258KB PDF 举报

"DOM对象中的节点操作.pdf" 在深入探讨DOM节点之前，首先理解DOM（Document Object Model）的本质至关重要。DOM是一种国际标准，它允许程序和脚本动态地访问和更新HTML、XML以及SVG等文档的结构、内容和样式。它将网页内容抽象为一系列可操作的对象，这些对象构成了一个树形结构，即DOM树。 DOM树中的每个节点都有其特定的角色和特性。根节点是整个DOM树的起点，通常对应HTML文档中的`<html>`标签。根节点之下是父节点和子节点的关系，父节点是位于一个节点之上，而子节点则是位于其下方的节点。兄弟节点是指在同一层级上并具有相同父节点的节点。后代节点指的是一个节点所有子节点及其子节点的集合，而叶子节点则是没有子节点的终端节点。在DOM中，元素节点扮演着关键角色，它们定义了网页的结构和意义，如`<body>`、`<p>`和`<a>`等。元素节点可以包含文本节点，这些节点包含实际显示在浏览器中的文本内容。此外，元素节点还可以有属性节点，例如`<a>`标签的`href`属性，虽然大部分属性节点对用户是不可见的，但它们对于元素的行为和功能至关重要。 DOM提供了一系列方法来访问和操作这些节点。例如，`nodeName`属性用于获取节点的名称，`nodeType`则用来识别节点的类型，1表示元素节点，2表示属性节点，3表示文本节点。`nodeValue`则返回节点的值，对于文本节点，这通常是可见的文本内容。通过这些属性和方法，开发者可以实现诸如查找特定元素、修改元素内容、添加或删除节点等操作。例如，要获取页面上id为“b1”的`<body>`元素，可以使用`document.getElementById("b1")`。若要改变某个元素的文本内容，可以这样操作： ```javascript var element = document.getElementById("myElement"); element.innerHTML = "新的文本内容"; ``` DOM的级别是其标准化过程的一个方面，不同级别定义了更多的接口和功能。例如，DOM Level 1定义了基本的HTML和XML节点操作，DOM Level 2引入了事件处理和CSS访问，而DOM Level 3增加了更多高级功能，如比较文档、序列化和加载/保存文档等。 DOM是网页动态化和交互的核心工具，通过理解和熟练运用DOM节点操作，开发者可以构建出更加丰富、响应式的Web应用。无论是简单的文本替换，还是复杂的页面重构，DOM都提供了强大的支持。

创建时间： 2018-03-17 20:02

作者：李刚

DOM概述

一、DOM是什么：

1、 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访

问和修改一个文档的内容和结构。

2、Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文

档对象。如果没有Document，DOM也就无从谈起。

3、Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某

个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象

的方法。

4、Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容

表现为一个相互连接的节点。

DOM是访问和操作Web页面的接口，使用该接口可以访问页面中的其他标准组件。

二、DOM分层：

1、根节点：在最顶层的<html>节点，称为根节点

2、父节点：一个节点之上的节点是该节点的父节点（parent）

3、子节点：一个节点之下的节点是该节点的子节点（child）

4、兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling）

5、后代：一个节点的子节点的结合可以称为是节点的后代（descendant）

6、叶子节点：在树型结构最底部的节点

7、元素节点：在html中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组

成了文档模型的语义逻辑结构

8、文本节点：包含在元素节点中的内容部分，如<p>标签中的文本。一般情况下，不为空的文本节点都

是可见并呈现与浏览器中的

9、属性节点：元素节点的属性，如<a>标签的href属性。一般情况下，大部分属性节点都是隐藏在浏览

器背后，并且不可见的。属性节点总是被包含在元素节点当中

下载后可阅读完整内容，剩余7页未读，立即下载

暮白寒窗雪

粉丝: 201
资源: 5

理解DOM：节点操作与模型解析

PHP原生DOM对象操作XML.pdf

JavaScript程序设计-操作DOM元素的节点及关系.pdf

JS操作DOM元素属性和方法.pdf

DOM基础（ppt）.pdf

Dom4j 使用简介.pdf

DOM4J 使用简介.pdf

JAVASCRIPTDOM对象介绍[定义].pdf

AJAX\掌握 Ajax\掌握 Ajax第 6 部分-建立基于 DOM 的 Web 应用程序.pdf

dom对象与jquery对象转换[参考].pdf

DOM 节点操作 【微重点】【案例】.pdf

最新资源

DOM 节点操作【微重点】【案例】.pdf