HTML DOM 学习

最新推荐文章于 2024-07-08 22:40:20 发布

冇得闲

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量570

点赞数

本文链接：https://blog.csdn.net/zzj1881/article/details/8528644

版权

1、HTML DOM 定义了访问和处理HTML文档的标准方法。

2、可以通过JS来操作DOM，从而添加、移除、改变或重排页面上的项目。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM

定义了一套标准的针对任何结构化文档的对象

XML DOM

定义了一套标准的针对 XML 文档的对象

HTML DOM

定义了一套标准的针对 HTML 文档的对象。

DOM 级别 1

DOM 级别 1 专注于 HTML 和 XML 文档模型。它含有文档导航和处理功能。

DOM 级别 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。

第二版的工作草案在 2000 年 9 月 29 日。

DOM 级别 2

DOM 级别 2 对 DOM 级别 1 添加了样式表对象模型，并定义了操作附于文档之上的样式信息的功能性。

DOM 级别 2 同时还定义了一个事件模型，并提供了对 XML 命名空间的支持。

作为一项 W3C 推荐标准，DOM 级别 2 规范发布于 2000 年 11 月 13 日：

DOM 级别 3

DOM Level 3 规定了内容模型 (DTD 和 Schemas) 和文档验证。同时规定了文档加载和保存、文档查看、文档格式化和关键事件。DOM Level 3 建立于 DOM Core Level 2 之上。

HTML 文档中的每个成分都是一个节点

DOM 是这样规定的：

1.、整个文档是一个文档节点

2、每个 HTML 标签是一个元素节点

3、包含在 HTML 元素中的文本是文本节点

4、每一个 HTML 属性是一个属性节点

5、注释属于注释节点

节点间的层次关系

DOM 访问节点

1、通过使用 getElementById() 和 getElementsByTagName() 方法

2、通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

3、document.getElementById("ID"); 返回特定ID的节点

getElementById() 无法工作在 XML 中。在 XML 文档中，您必须通过拥有类型 id 的属性来进行搜索，而此类型必须在 XML DTD 中进行声明。

4、var x=document.getElementById('maindiv').getElementsByTagName("p");

返回ID为maindiv节点下所有子节点为p标签的列表。

5、parentNode 访问当前节点的父节点。

6、firstChild 返回当前节点的第一个字节点。

7、lastChild 返回当前节点的最后一个节点。

8、document.documentElement 可返回存在于 XML 以及 HTML 文档中的文档根节点。

9、document.body 是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

10、nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

11、nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

12、nodeType

nodeType 属性可返回节点的类型。

DOM 手册

Browser 对象参考手册

对象	描述
Window	JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator	包含客户端浏览器的信息。
Screen	包含客户端显示屏的信息。
History	包含了浏览器窗口访问过的 URL。
Location	包含了当前 URL 的信息。

HTML DOM 对象参考手册

对象	描述
Document	代表整个 HTML 文档，可被用来访问页面中的所有元素
Anchor	代表 <a> 元素
Area	代表图像映射中的 <area> 元素
Base	代表 <base> 元素
Body	代表 <body> 元素
Button	代表 <button> 元素
Event	代表某个事件的状态
Form	代表 <form> 元素
Frame	代表 <frame> 元素
Frameset	代表 <frameset> 元素
Iframe	代表 <iframe> 元素
Image	代表 <img> 元素
Input button	代表 HTML 表单中的一个按钮
Input checkbox	代表 HTML 表单中的复选框
Input file	代表 HTML 表单中的文件上传
Input hidden	代表 HTML 表单中的隐藏域
Input password	代表 HTML 表单中的密码域
Input radio	代表 HTML 表单中的单选按钮
Input reset	代表 HTML 表单中的重置按钮
Input submit	代表 HTML 表单中的确认按钮
Input text	代表 HTML 表单中的文本输入域（文本框）
Link	代表 <link> 元素
Meta	代表 <meta> 元素
Object	代表 <Object> 元素
Option	代表 <option> 元素
Select	代表 HTML 表单中的选择列表
Style	代表单独的样式声明
Table	代表 <table> 元素
TableData	代表 <td> 元素
TableRow	代表 <tr> 元素
Textarea	代表 <textarea> 元素

本文根据W3C整理而出，详情信息请访问W3C查看。

冇得闲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM 学习

1、HTML DOM 定义了访问和处理HTML文档的标准方法。2、可以通过JS来操作DOM，从而添加、移除、改变或重排页面上的项目。DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：Core DOM定义了一套标准的针对任何结构化文档的对象XML DOM定义了一套标准的针对 XML 文档的对象HTML DOM定义了一套标准
复制链接

扫一扫