-
DOM 简介 | 深入了解DOM
目录
今天我们将了解WEB编程中一个重要的概念DOM（Document Object Model）文档对象模型，它帮助我们使用JavaScript（或其他编程语言）操纵文档。
一、DOM是什么
很多人会问 DOM 具体是什么东西呢？其实，DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示，它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象，并提供了一些属性和方法来描述它们。
根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。DOM 是文档对象模型（document object model）的缩写，它是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
DOM是W3C的标准。它被分为3个部分：
- 核心DOM：针对任何结构化文档的标准模型
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
核心DOM：是用于XML与HTML的共用接口；XMLDOM：XML专用接口；HTML DOM：HTML专用接口；
DOM不是一种编程语言，它是一种标准，一个模型，它与编程语言相对独立。编程语言都可以按照这种模型实现对文档的访问和处理。
注：因为我们主要是学习WEB编程，所以接下来文章中即将提到的DOM均指HTML DOM，使用到的DOM API也均是JavaScript脚本语言实现。
二、DOM的访问
我们知道，各个浏览器对JavaScript都有不同的实现，所以它们在实现DOM标准时，也会有一些差异，但它们既然都遵循了该标准，所以又呈现出了不同程度一致性。我们在使用DOM时，并不需要做任何特别的操作，如果碰到有差异的地方（主要体现在方法名称和参数上），只需根据不同浏览器使用他们各自实现的相关方法即可。实际上他们的实现都遵循了统一标准。
DOM把文档视做树结构：
- 整个文档是一个文档节点。
- 每个 HTML 标签是一个元素节点。
- 包含在 HTML 元素中的文本是文本节点。
- 每一个 HTML 属性是一个属性节点。
- 注释属于注释节点。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
通过这个节点树，JavaScript可以轻松的访问并操作这些节点。Javascript获取到的每个节点都被解析成对象，遭DOM中，document是顶级对象，DOM元素的属性和方法大都源于此。
◼️ 举个栗子：请看下面这个HTML文档：
- <html>
- <head>
- <title>DOM Tutorialtitle>
- head>
- <body>
- <h1>DOM Lesson oneh1>
- <p>Hello world!p>
- body>
- html>
上面所有的节点彼此间都存在关系。
除文档节点之外的每个节点都有父节点。举例，
和 的父节点是 节点，文本节点 "Hello world!" 的父节点是节点。
大部分元素节点都有子节点。比方说，
节点有一个子节点：节点。<title>节点也有一个子节点：文本节点 "DOM Tutorial"。</p> <p>当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1>和 <p>是同辈，因为它们的父节点均是 <body>节点。</p> <p>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 <html>节点的后代，而第一个文本节点是 <head>节点的后代。</p> <h4 id="%E4%B8%89%E3%80%81DOM%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B"><a name="t2"></a><strong>三、DOM节点类型</strong></h4> <p>每个节点对象有都有一个nodeType，nodeName和nodeValue属性，通过这几个属性的值，我们可以获取该节点的相关信息：</p> <div class="table-box"><table><tbody><tr><th colspan="2">nodeType返回节点类型</th><th>nodeName 返回</th><th>nodeValue 返回</th></tr><tr><td><strong>1</strong></td><td><strong>Element</strong></td><td><strong>元素名</strong></td><td><strong>null</strong></td></tr><tr><td><strong>2</strong></td><td><strong>Attr</strong></td><td><strong>属性名称</strong></td><td><strong>属性值</strong></td></tr><tr><td><strong>3</strong></td><td><strong>Text</strong></td><td><strong>#text</strong></td><td><strong>节点的内容</strong></td></tr><tr><td>4</td><td>CDATASection</td><td>#cdata-section</td><td>节点的内容</td></tr><tr><td>5</td><td>EntityReference</td><td>实体引用名称</td><td>null</td></tr><tr><td>6</td><td>Entity</td><td>实体名称</td><td>null</td></tr><tr><td>7</td><td>ProcessingInstruction</td><td>target</td><td>节点的内容</td></tr><tr><td><strong>8</strong></td><td><strong>Comment</strong></td><td><strong>#comment</strong></td><td><strong>注释文本</strong></td></tr><tr><td><strong>9</strong></td><td><strong>Document</strong></td><td><strong>#document</strong></td><td><strong>null</strong></td></tr><tr><td>10</td><td>DocumentType</td><td>文档类型名称</td><td>null</td></tr><tr><td>11</td><td>DocumentFragment</td><td>#document 片段</td><td>null</td></tr><tr><td>12</td><td>Notation</td><td>符号名称</td><td>null</td></tr></tbody></table></div> <h4 id="%E5%9B%9B%E3%80%81DOM%E5%88%86%E7%BA%A7"><a name="t3"></a><strong>四、DOM的分级</strong></h4> <p>DOM 分级仅做了解即可。DOM的级别分类如下：</p> <p><strong>一级DOM（DOM Level 1）</strong></p> <p>1级DOM在1998年10月份成为W3C的推荐标准，由DOM核心（DOM Core）与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。<span style="color:#38d8f0;"><strong>简单来说，DOM1级就是映射文档结构和提供基本的文档操作方法。</strong></span></p> <p><strong>二级DOM（DOM Level 2）</strong></p> <p>2级DOM在一级DOM的基础上进行了扩展，它引进了几个新DOM模块来处理新的接口类型：</p> <ul><li>DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；</li><li>DOM事件：描述事件接口；</li><li>DOM样式：描述处理基于CSS样式的接口；</li><li>DOM遍历与范围：描述遍历和操作文档树的接口；根据DOM，HTML文档中的每个成分都是一个节点</li></ul> <p>DOM2级，就是对DOM1级进行扩展，2级DOM通过对象接口增加对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM1进行了扩展，从而可支持XML命名空间。<strong><span style="color:#38d8f0;">简单来说，DOM2级就是在DOM1的基础上增加了视图、事件、样式、遍历和范围的接口，和支持XML命名空间。</span></strong></p> <p><strong>三级DOM（DOM Level 3）</strong></p> <p>3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。 </p> <blockquote> <p>DOM3级，在前面DOM基础上，引入了以统一方式加载和保存文档的方法，新增了验证文档的方法，同时也对DOM核心进行了扩展，开始支持XML1.0规范。 </p> </blockquote> <p><strong>零级DOM（DOM Level 0）</strong></p> <p>0级DOM其实并不真实存在，业内通常把W3C标准化之前的DOM相关称为0级DOM。</p> <blockquote> <p>其实，除了上面的三个等级之外，还有一个叫DOM0级的东西，实际上标准并没有这个东西，它指的是IE4和Netscape Navigator 4.0 最初支持的DHTML，DHTML实际上是HTML、CSS和JS的一个集成，代表的是一种已有的技术，不是标椎，所以DOM0级其实代表的是历史节点中未形成标准的一个初期产物。</p> </blockquote> <p>举一个常见的DOM0级事件和DOM2级事件的比较：绑定按钮的onclick赋值为一个函数就是DOM0级的，但是onclick多次赋值不同函数，最后也会被后面的函数覆盖掉；而DOM2级利用提供的addEventListener方法监听按钮的click事件，多次写监听同一个事件，函数会被依次执行的，不会被覆盖。</p> <p><strong>◼️ 参考资料</strong></p> <p><a href="https://zhuanlan.zhihu.com/p/346069161" rel="nofollow" title="快速了解JavaScript的DOM模型 - 知乎">快速了解JavaScript的DOM模型 - 知乎</a> | <a href="https://www.jianshu.com/p/fc2cc0ac157c" rel="nofollow" title="DOM 的级别分类 - 简书">DOM 的级别分类 - 简书</a></p> <p><a href="https://blog.csdn.net/mai0824/article/details/115055025" title="DOM所包含的主要内容有哪几部分">DOM所包含的主要内容有哪几部分</a> | <a href="https://outofmemory.cn/zaji/7504075.html" rel="nofollow" title="DOM的分级_随笔_内存溢出">DOM的分级_随笔_内存溢出</a></p> <p style="text-align:center;"><img alt="" height="35" src="https://1000bd.com/contentImg/2024/04/10/1ce64436ac4f69e7.gif" ></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1356495">Mac系统清理工具BuhoCleaner</a> <br /> <a href="/Article/Index/1358116">nginx配置实例-负载均衡</a> <br /> <a href="/Article/Index/1033248">IDEA2022插件：EasyCode一键生成增删改查代码</a> <br /> <a href="/Article/Index/1032006">js用普通DIV模拟A标签</a> <br /> <a href="/Article/Index/1446854">spring cloud alibaba之nacos</a> <br /> <a href="/Article/Index/897602">深度干货！一篇Paper带您读懂HTAP | StoneDB学术分享会第①期</a> <br /> <a href="/Article/Index/1060455">TensorBoard的使用2（add_image函数）</a> <br /> <a href="/Article/Index/930723">手写RPC框架-注册中心实现</a> <br /> <a href="/Article/Index/815249">深入了解指针，指针数组，数组指针。</a> <br /> <a href="/Article/Index/737440">JVM自定义类加载器在代码扩展性的实践</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/sunyctf/article/details/132558497 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>