JavaScript之DOM对象（Node结点属性、导航属性、页面查找）

关注

VIP免费原创最新推荐文章于 2026-04-23 10:07:49 发布 500 阅读 AI 写同款· GEO 优化 ›

JavaScript高级程序设计第十四章---DOM 文档对象模型第十四章本章内容理解文档对象模型（DOM）的构成节点类型浏览器兼容性 MutationObserver 接口文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级任何HTML 或XML 文档都可以用DOM表示阅读详情

文章目录

DOM与Node节点

1、DOM的概念
DOM 是 W3C（万维网联盟）的标准，DOM 定义了访问 HTML 和 XML 文档的标准。

W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

2、DOM的分类

核心 DOM ：针对任何结构化文档的标准模型
XML DOM ：针对 XML 文档的标准模型，定义了所有 XML 元素的对象和属性，以及访问它们的方法。
HTML DOM ：针对 HTML 文档的标准模型，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

3、DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

4、DOM节点关系图

自身属性

1、属性

attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点的文本值（显示在页面上的内容）

2、测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
    <p name="p_label"  class="p1">P文本</p>
    <div class="div2">DIV2文本
        <div div3>DIV3文本</div>
        <a href="">A文本</a>
    </div>
</div>

<script>
    var ele