首页 > 其他分享 >js之DOM简介

js之DOM简介

时间:2023-02-01 10:03:18浏览次数:32  
标签:XML DOM 简介 js 文档 模块 DOM1 节点


1 什么是 DOM

1)DOM 英文全称“Document Object Model”,译为“文档对象模型”。

2)DOM 是一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

2 DOM 的组成

1)核心DOM - 针对任何结构化文档的标准模型。

2)XML DOM - 针对 XML 文档的标准模型。

3)HTML DOM - 针对 HTML 文档的标准模型。

3 DOM 分级(DOM的发展版本)

DOM0

本没有DOM0,习惯上把未形成标准的试验性质的初级阶段的DOM称为​​DOM0​​​,即:​​第0级DOM​​。

DOM1

W3C 于1998年10月完成了第一级 DOM,即:​​DOM1​​。

​DOM1​​​ 级主要定义了HTML和XML文档的底层结构。在​​DOM1​​​ 中,DOM由两个模块组成:​​DOM Core​​​(DOM核心)和 ​​DOM HTML​​​。其中,​​DOM Core​​​ 规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。​​DOM HTML​​​ 则在 DOM 核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的 ​​Document​​ 对象。

DOM2

在 ​​DOM1​​​ 的基础上 ​​DOM2​​​ 和 ​​DOM3​​​ 引入了更多的交互能力,也支持了更高级的XML特性。​​DOM2​​​ 和 ​​DOM3​​ 将 DOM 分为更多具有联系的模块。DOM2 级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1 级中的 DOM 核心模块也经过扩展开始支持XML命名空间。在 DOM2 中引入了下列模块,在模块包含了众多新类型和新接口:

  • ​DOM视图​​(DOM Views):定义了跟踪不同文档视图的接口。
  • ​DOM事件​​(DOM Events):定义了事件和事件处理的接口。
  • ​DOM样式​​(DOM Style):定义了基于CSS为元素应用样式的接口。
  • ​DOM遍历和范围​​(DOM Traversal and Range):定义了遍历和操作文档树的接口。

DOM3

DOM3进一步扩展了DOM,在 DOM3 中引入了以下模块:

  • ​DOM加载和保存模块​​(DOM Load and Save):引入了以统一方式加载和保存文档的方法。
  • ​DOM验证模块​​(DOM Validation):定义了验证文档的方法。
  • ​DOM核心的扩展​​(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base

4 DOM 树

js之DOM简介_XML

5 节点 Node

文档中的每一个部分都是节点,包括document 元素 属性 文本...

5.1 节点分类

  • document 文档节点
  • elementNode 元素节点
  • attributeNode 属性节点
  • textNode 文本节点
  • commentNode 注释节点

5.2 节点属性

  • nodeName 节点名 元素节点通过nodeName可以获取标签名
  • nodeValue 节点值
  • nodeType 节点类型 值是数字: document(9) element(1) attribute(2) text(3) comment(8)

标签:XML,DOM,简介,js,文档,模块,DOM1,节点
From: https://blog.51cto.com/u_14389461/6030679

相关文章

  • DOM属性操作中CRUD操作
    CRUD操作1.append():父元素将子元素追加到末尾对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾2.prepend():父元素将子元素追加到开头对象1.appen......
  • mvc_jsp演变历史和MVC详解
    MVC:开发模式1.jsp演变历史1.早期只有servlet,只能使用response输出标签数据,非常麻烦2.后来又jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写大......
  • python UI自动化之JS定位
    前言本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本一、以下总结了5种js定位的方法除了id是定位到的是单个element元素对象,其它的都是elemen......
  • 【Javaweb】jsp | 简单学习
    什么是jsp,它有什么用?jsp的全称是javaserverpages。Java的服务器界面。jsp的主要作用是代替Servlet程序回传html页面的数据因为Servlet程序回传html页面数据是一件非常......
  • js + css 按钮鼠标移动光晕 跟随
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • Go使用post方法将json数据传给一个url(后端接口)
       最近做的一个项目是采用前后端分离模式写前端,后端是fabric区块链,提供接口,需要使用post方法进行访问。如上一章注册用户,就是需要把用户名、账户信息转换成json形式......
  • JavaScript学习笔记—DOM:事件
    事件(event)事件就是用户和页面之间发生的交互行为比如:点击按钮,鼠标移动,双击按钮,敲击键盘,松开按键...可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互绑定响......
  • CSS & JS Effect – 画三角形 Triangle
    前言画三角形有什么用?可以做这样的Design  参考5WaysToCreateATriangleWithCSS BorderTriangle这应该是最远古的招数HTML<divclass="box"></di......
  • spring boot——json解析示例——fastjson——使用fastJson将json与对象、集合、数组
                 ......
  • autojs实例02-为朋友圈指定好友点赞
    声明:文章仅用于学习交流,切勿用于非法用途。一、autojs版本使用autojs版本4.1,其余版本对微信、qq、抖音有限制。下载地址:关注【产品经理不是经理】gzh,回复【autojs】即......