娄底网站开发,室内设计图片大全,网站logo设计创意,网站建设弹窗代码目录
一、DOM是什么
二、DOM的访问
三、DOM节点类型
四、DOM的分级 今天我们将了解WEB编程中一个重要的概念DOM#xff08;Document Object Model#xff09;文档对象模型#xff0c;它帮助我们使用JavaScript#xff08;或其他编程语言#xff09;操纵文档。
一、DO…目录
一、DOM是什么
二、DOM的访问
三、DOM节点类型
四、DOM的分级 今天我们将了解WEB编程中一个重要的概念DOMDocument Object Model文档对象模型它帮助我们使用JavaScript或其他编程语言操纵文档。
一、DOM是什么
很多人会问 DOM 具体是什么东西呢其实DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象并提供了一些属性和方法来描述它们。 根据W3C DOM规范DOM是HTML与XML的应用编程接口APIDOM将整个页面映射为一个由层次节点组成的文件。DOM 是文档对象模型document object model的缩写它是一种提供对文档访问或修改方法的模型它的范围很广但对于 web 开发者来说往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术但实际上范围远不局限在这里。 DOM是W3C的标准。它被分为3个部分
核心DOM针对任何结构化文档的标准模型XML DOM针对XML文档的标准模型HTML DOM针对HTML文档的标准模型 核心DOM是用于XML与HTML的共用接口XMLDOMXML专用接口HTML DOMHTML专用接口 DOM不是一种编程语言它是一种标准一个模型它与编程语言相对独立。编程语言都可以按照这种模型实现对文档的访问和处理。
注因为我们主要是学习WEB编程所以接下来文章中即将提到的DOM均指HTML DOM使用到的DOM API也均是JavaScript脚本语言实现。
二、DOM的访问
我们知道各个浏览器对JavaScript都有不同的实现所以它们在实现DOM标准时也会有一些差异但它们既然都遵循了该标准所以又呈现出了不同程度一致性。我们在使用DOM时并不需要做任何特别的操作如果碰到有差异的地方主要体现在方法名称和参数上只需根据不同浏览器使用他们各自实现的相关方法即可。实际上他们的实现都遵循了统一标准。
DOM把文档视做树结构
整个文档是一个文档节点。每个 HTML 标签是一个元素节点。包含在 HTML 元素中的文本是文本节点。每一个 HTML 属性是一个属性节点。注释属于注释节点。
HTML 文档中的所有节点组成了一个文档树或节点树。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点并由此继续伸出枝条直到处于这棵树最低级别的所有文本节点为止。 通过这个节点树JavaScript可以轻松的访问并操作这些节点。Javascript获取到的每个节点都被解析成对象遭DOM中document是顶级对象DOM元素的属性和方法大都源于此。
◼️ 举个栗子请看下面这个HTML文档
htmlheadtitleDOM Tutorial/title/headbodyh1DOM Lesson one/h1pHello world!/p/body
/html
上面所有的节点彼此间都存在关系。
除文档节点之外的每个节点都有父节点。举例head和 body的父节点是 html节点文本节点 Hello world! 的父节点是 p节点。
大部分元素节点都有子节点。比方说head节点有一个子节点title节点。title节点也有一个子节点文本节点 DOM Tutorial。
当节点分享同一个父节点时它们就是同辈同级节点。比方说h1和 p是同辈因为它们的父节点均是 body节点。
节点也可以拥有后代后代指某个节点的所有子节点或者这些子节点的子节点以此类推。比方说所有的文本节点都是 html节点的后代而第一个文本节点是 head节点的后代。
三、DOM节点类型
每个节点对象有都有一个nodeTypenodeName和nodeValue属性通过这几个属性的值我们可以获取该节点的相关信息
nodeType返回节点类型nodeName 返回nodeValue 返回1Element元素名null2Attr属性名称属性值3Text#text节点的内容4CDATASection#cdata-section节点的内容5EntityReference实体引用名称null6Entity实体名称null7ProcessingInstructiontarget节点的内容8Comment#comment注释文本9Document#documentnull10DocumentType文档类型名称null11DocumentFragment#document 片段null12Notation符号名称null
四、DOM的分级
DOM 分级仅做了解即可。DOM的级别分类如下
一级DOMDOM Level 1
1级DOM在1998年10月份成为W3C的推荐标准由DOM核心DOM Core与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。简单来说DOM1级就是映射文档结构和提供基本的文档操作方法。
二级DOMDOM Level 2
2级DOM在一级DOM的基础上进行了扩展它引进了几个新DOM模块来处理新的接口类型
DOM视图描述跟踪一个文档的各种视图使用CSS样式设计文档前后的接口DOM事件描述事件接口DOM样式描述处理基于CSS样式的接口DOM遍历与范围描述遍历和操作文档树的接口根据DOMHTML文档中的每个成分都是一个节点
DOM2级就是对DOM1级进行扩展2级DOM通过对象接口增加对鼠标和用户界面事件DHTML长期支持鼠标与用户界面事件、范围、遍历重复执行DOM文档和层叠样式表CSS的支持。同时也对DOM1进行了扩展从而可支持XML命名空间。简单来说DOM2级就是在DOM1的基础上增加了视图、事件、样式、遍历和范围的接口和支持XML命名空间。
三级DOMDOM Level 3
3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展DOM3包含一个名为“DOM载入与保存”的新模块DOM核心扩展后可支持XML1.0的所有内容包括XML Infoset、 XPath、和XML Base。 DOM3级在前面DOM基础上引入了以统一方式加载和保存文档的方法新增了验证文档的方法同时也对DOM核心进行了扩展开始支持XML1.0规范。 零级DOMDOM Level 0
0级DOM其实并不真实存在业内通常把W3C标准化之前的DOM相关称为0级DOM。 其实除了上面的三个等级之外还有一个叫DOM0级的东西实际上标准并没有这个东西它指的是IE4和Netscape Navigator 4.0 最初支持的DHTMLDHTML实际上是HTML、CSS和JS的一个集成代表的是一种已有的技术不是标椎所以DOM0级其实代表的是历史节点中未形成标准的一个初期产物。 举一个常见的DOM0级事件和DOM2级事件的比较绑定按钮的onclick赋值为一个函数就是DOM0级的但是onclick多次赋值不同函数最后也会被后面的函数覆盖掉而DOM2级利用提供的addEventListener方法监听按钮的click事件多次写监听同一个事件函数会被依次执行的不会被覆盖。
◼️ 参考资料
快速了解JavaScript的DOM模型 - 知乎 | DOM 的级别分类 - 简书
DOM所包含的主要内容有哪几部分 | DOM的分级_随笔_内存溢出
