DOM（文档对象模型）：理解网页结构与内容操作的关键技术

5687 / 2026-01-20 02:43:35 世界杯主题歌

DOM（文档对象模型）定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。HTML DOM用于操作HTML文档，而XML DOM用于操作XML文档。

HTML DOM示例

通过ID获取并修改HTML元素的值：代码语言：html复制

通过标签名获取并修改HTML元素的值：代码语言：html复制

This is a Heading

This is another Heading

XML DOM示例

加载XML文件并获取元素的值：代码语言：html复制

加载XML字符串并获取元素的值：代码语言：html复制

DOM编程接口DOM的编程接口由一组标准属性和方法定义。属性通常用于描述节点的特征，而方法通常用于执行与节点相关的操作。

属性的例子

x.nodeName - x的名称x.nodeValue - x的值x.parentNode - x的父节点x.childNodes - x的子节点x.attributes - x的属性节点方法的例子

x.getElementsByTagName(name) - 获取指定标签名的所有元素x.appendChild(node) - 将一个子节点插入到xx.removeChild(node) - 从x中移除一个子节点这些属性和方法使得通过编程可以访问和操作文档的各个部分。

XML DOM 节点根据 XML DOM，XML 文档中的所有内容都是节点：

整个文档是一个文档节点每个 XML 元素是一个元素节点XML 元素中的文本是文本节点每个属性是一个属性节点注释是注释节点DOM 示例

看下面的 XML 文件（books.xml）：

代码语言：xml复制

Everyday Italian

Giada De Laurentiis

2005

30.00

Harry Potter

J.K. Rowling

2005

29.99

XQuery Kick Start

James McGovern

Per Bothner

Kurt Cagle

James Linn

Vaidyanathan Nagarajan

2003

49.99

Learning XML

Erik T. Ray

2003

39.95

上述 XML 中的根节点命名为。

文档中的所有其他节点都包含在中。

根节点包含了 4 个节点。

第一个节点包含子节点：、<author>、<year> 和 <price>。</p> <p>子节点分别包含一个文本节点，内容分别为 "Everyday Italian"、"Giada De Laurentiis"、"2005" 和 "30.00"。</p> <p>文本始终存储在文本节点中在 DOM 处理中常见的错误是期望元素节点包含文本。然而，元素节点的文本存储在文本节点中。</p> <p>在这个例子中：<year>2005</year>，元素节点 <year> 包含一个值为 "2005" 的文本节点。</p> <p>"2005" 不是 <year> 元素的值！</p> <p>XML DOM 节点树XML DOM 将 XML 文档视为树结构。树结构被称为节点树。</p> <p>所有节点都可以通过树访问。它们的内容可以修改或删除，并且可以创建新元素。</p> <p>节点树显示了节点集和它们之间的连接。树从根节点开始，延伸到树的最低层的文本节点：</p> <p>图像上方代表 XML 文件 books.xml。</p> <p>节点的父节点、子节点和兄弟姐妹节点树中的节点之间存在层次关系。</p> <p>术语父节点、子节点和兄弟姐妹用于描述这些关系。父节点有子节点。在同一层级上的子节点称为兄弟姐妹。</p> <p>在节点树中，顶部节点称为根节点除了根节点，每个节点都有一个父节点一个节点可以有任意数量的子节点叶子是没有子节点的节点具有相同父节点的节点称为兄弟节点以下图像说明了节点树的一部分以及节点之间的关系：</p> <p>由于 XML 数据是以树形式结构化的，可以在不知道树的确切结构和包含的数据类型的情况下遍历它。</p> <p>第一个子节点 - 最后一个子节点看下面的 XML 片段：</p> <p>代码语言：xml复制<bookstore></p> <p><book category="cooking"></p> <p><title lang="en">Everyday Italian

Giada De Laurentiis

2005

30.00

在上述 XML 中，元素是 <book> 元素的第一个子节点，<price> 元素是 <book> 元素的最后一个子节点。</p> <p>此外，<book> 元素是 <title>、<author>、<year> 和 <price> 元素的父节点。</p> <p>XML DOM - 访问节点使用 DOM，您可以访问 XML 文档中的每个节点。</p> <p>访问节点有三种方式可以访问节点：</p> <p>使用 getElementsByTagName() 方法通过循环遍历节点树通过导航节点树，使用节点之间的关系getElementsByTagName() 方法getElementsByTagName() 返回具有指定标签名的所有元素。</p> <p>语法</p> <p>代码语言：javascript复制node.getElementsByTagName("tagname");示例</p> <p>以下示例返回 x 元素下的所有 <title> 元素：</p> <p>代码语言：javascript复制x.getElementsByTagName("title");注意，上面的示例仅返回 x 节点下的 <title> 元素。要返回 XML 文档中的所有 <title> 元素，请使用：</p> <p>代码语言：javascript复制xmlDoc.getElementsByTagName("title");其中 xmlDoc 是文档本身（文档节点）。</p> <p>DOM 节点列表getElementsByTagName() 方法返回一个节点列表。节点列表是节点的数组。</p> <p>代码语言：javascript复制x = xmlDoc.getElementsByTagName("title");x 中的 <title> 元素可以通过索引号访问。要访问第三个 <title>，您可以这样写：</p> <p>代码语言：javascript复制y = x[2];注意：索引从 0 开始。</p> <p>DOM 节点列表长度length 属性定义了节点列表的长度（节点数）。</p> <p>您可以通过使用 length 属性循环遍历节点列表：</p> <p>代码语言：javascript复制var x = xmlDoc.getElementsByTagName("title");</p> <p>for (i = 0; i < x.length; i++) {</p> <p>// 对每个节点执行一些操作</p> <p>}节点类型XML 文档的 documentElement 属性是根节点。</p> <p>节点的 nodeName 属性是节点的名称。</p> <p>节点的 nodeType 属性是节点的类型</p> <p>遍历节点以下代码循环遍历根节点的子节点，这些子节点也是元素节点：</p> <p>代码语言：javascript复制txt = "";</p> <p>x = xmlDoc.documentElement.childNodes;</p> <p>for (i = 0; i < x.length; i++) {</p> <p>// 仅处理元素节点（类型 1）</p> <p>if (x[i].nodeType == 1) {</p> <p>txt += x[i].nodeName + "<br>";</p> <p>}</p> <p>}示例解释：</p> <p>假设您已经将 "books.xml" 加载到 xmlDoc 中获取根元素（xmlDoc）的子节点对于每个子节点，检查节点类型。如果节点类型是 "1"，则它是一个元素节点如果它是一个元素节点，则输出节点的名称导航节点关系以下代码使用节点之间的关系导航节点树：</p> <p>代码语言：javascript复制x = xmlDoc.getElementsByTagName("book")[0];</p> <p>xlen = x.childNodes.length;</p> <p>y = x.firstChild;</p> <p>txt = "";</p> <p>for (i = 0; i < xlen; i++) {</p> <p>// 仅处理元素节点（类型 1）</p> <p>if (y.nodeType == 1) {</p> <p>txt += y.nodeName + "<br>";</p> <p>}</p> <p>y = y.nextSibling;</p> <p>}示例解释：</p> <p>假设您已经将 "books.xml" 加载到 xmlDoc 中获取第一个 book 元素的子节点将 "y" 变量设置为第一个 book 元素的第一个子节点对于每个子节点（从第一个子节点 "y" 开始）：检查节点类型。如果节点类型是 "1"，则它是一个元素节点如果它是一个元素节点，则输出节点的名称将 "y" 变量设置为下一个兄弟节点，并再次运行循环XML DOM 节点信息nodeName 属性nodeName 属性指定节点的名称。</p> <p>nodeName 是只读的。元素节点的 nodeName 与标签名相同。属性节点的 nodeName 是属性名。文本节点的 nodeName 始终是 #text。文档节点的 nodeName 始终是 #document。nodeName 属性示例</p> <p>nodeValue 属性nodeValue 属性指定节点的值。</p> <p>元素节点的 nodeValue 是未定义的。文本节点的 nodeValue 是文本本身。属性节点的 nodeValue 是属性值。获取元素的值以下代码检索第一个 <title> 元素的文本节点值：</p> <p>代码语言：javascript复制var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];</p> <p>var txt = x.nodeValue;结果：txt = "Everyday Italian"</p> <p>示例解释：</p> <p>假设您已经将 books.xml 加载到 xmlDoc 中。获取第一个 <title> 元素节点的文本节点。将 txt 变量设置为文本节点的值。更改元素的值以下代码更改了第一个 <title> 元素的文本节点值：</p> <p>代码语言：javascript复制var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];</p> <p>x.nodeValue = "Easy Cooking";示例解释：</p> <p>假设您已经将 books.xml 加载到 xmlDoc 中。获取第一个 <title> 元素节点的文本节点。将文本节点的值更改为 "Easy Cooking"。nodeType 属性nodeType 属性指定节点的类型。</p> <p>nodeType 是只读的。最重要的节点类型是：元素：1属性：2文本：3注释：8文档：9nodeType 属性示例</p> <p>DOM 属性列表（命名节点映射）元素节点的 attributes 属性返回属性节点的列表。</p> <p>这称为命名节点映射，与节点列表类似，只是在方法和属性上有一些差异。</p> <p>属性列表会自我更新。如果删除或添加了属性，列表会自动更新。</p> <p>此代码片段从 "books.xml" 中的第一个 <book> 元素返回属性节点的列表：</p> <p>代码语言：javascript复制x = xmlDoc.getElementsByTagName('book')[0].attributes;执行上述代码后，x.length 是属性的数量，x.getNamedItem() 可用于返回一个属性节点。</p> <p>此代码片段获取书籍的 "category" 属性值和属性列表的数量：</p> <p>代码语言：javascript复制x = xmlDoc.getElementsByTagName("book")[0].attributes;</p> <p>txt = x.getNamedItem("category").nodeValue + " " + x.length;输出：</p> <p>cooking 1示例解释：</p> <p>假设 books.xml 已加载到 xmlDoc 中。设置 x 变量以保存第一个 <book> 元素的所有属性的列表。获取 "category" 属性的值和属性列表的长度。最后为了方便其他设备和平台的小伙伴观看往期文章：</p> <p>微信公众号搜索：Let us Coding，关注后即可获取最新文章推送</p> <p>看完如果觉得有帮助，欢迎点赞、收藏、关注</p> </section> <footer> <p><a href="/1fbf3f4cdab3e814/4458b0b3ce988c27.html">在什么软件可以看王者荣耀回放在哪可以看王者回放</a></p> <p><a href="/270a4e9e2a0d6faf/f764d3c5e37fe873.html">一人用两部手机有必要吗？深度探讨双手机时代的生活新选择</a></p> </footer> </article> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-12"> <div class="widget"> <div class="widget-main"> <ul class="widget-main-nav"> <li><a href="/270a4e9e2a0d6faf/index.html" title="世界杯介绍">世界杯介绍</a></li> <li><a href="/6727e4576a6b67a0/index.html" title="世界杯主题歌">世界杯主题歌</a></li> <li><a href="/1fbf3f4cdab3e814/index.html" title="2018世界杯球队">2018世界杯球队</a></li> </ul> </div> </div> </div> <div class="col-md-12"> <div class="widget"> <strong><i class="fa fa-newspaper-o"></i>热门信息</strong> <div class="widget-main"> <ul class="widget-main-hot"> <li> <a class="text-ellipsis" href="/270a4e9e2a0d6faf/33fc39258dcbc07b.html">《Dreamweaver CS6 完全自学教程》笔记第七章：AP Div 元素</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/00d7fcd14d6059f2.html">价格收费</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/bbfac5005e8a0996.html">如何讓腿毛變少？告別毛腿困擾，重現絲滑肌的祕密</a> </li> <li> <a class="text-ellipsis" href="/270a4e9e2a0d6faf/41a6548250a13773.html">小赢卡贷逾期多久被打电话给紧急联系人？申请重组分期要什么材料？</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/6efd14bbc9081278.html">洛谷 USACO P2207 Photo</a> </li> <li> <a class="text-ellipsis" href="/1fbf3f4cdab3e814/a16df10b345242bd.html">华为荣耀盒子PRO值得买吗？华为荣耀盒子PRO详细深度评测图解</a> </li> <li> <a class="text-ellipsis" href="/270a4e9e2a0d6faf/1dc08db5c35a672d.html">京东有实体店吗（京东线下门店地址查询）</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/903abe0c3d262428.html">Win7网上邻居怎么打开？Win7开启网上邻居的三种方法</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/cb19fae67fca23d3.html">摁手印对用哪个手指有要求吗</a> </li> <li> <a class="text-ellipsis" href="/6727e4576a6b67a0/8a41650a68db54ee.html">“唅呀填坑吼作雷”的意思及全诗出处和翻译赏析</a> </li> </ul> </div> </div> </div> <div class="col-md-12"> <div class="widget"> <strong><i class="fa fa-newspaper-o"></i>友情链接</strong> <div class="widget-main"> <ul class="widget-main-tags"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></ul> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="footer-main"> Copyright © 2022 2022世界杯_国足进过几次世界杯 - 4v116.com All Rights Reserved. </div> </div> </div> </div> </footer> <div id="top" class="hidden-xs hidden-sm"> <ul> <li class="top-item"> <a href="javascript:;" data-tooltip="top" style="display: none;" id="go-top"><i class="fa fa-chevron-up"></i></a> </li> </ul> </div> </div> <script src="/static/js/nav.js"></script> <script src="/static/js/zui.js"></script> <script src="/static/js/main.js"></script> </body> </html>