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 对象参考手册
对象 | 描述 |
JavaScript 层级中的顶层对象,表示浏览器窗口。 | |
包含客户端浏览器的信息。 | |
包含客户端显示屏的信息。 | |
包含了浏览器窗口访问过的 URL。 | |
包含了当前 URL 的信息。 |
HTML DOM 对象参考手册
对象 | 描述 |
代表整个 HTML 文档,可被用来访问页面中的所有元素 | |
代表 <a> 元素 | |
代表图像映射中的 <area> 元素 | |
代表 <base> 元素 | |
代表 <body> 元素 | |
代表 <button> 元素 | |
代表某个事件的状态 | |
代表 <form> 元素 | |
代表 <frame> 元素 | |
代表 <frameset> 元素 | |
代表 <iframe> 元素 | |
代表 <img> 元素 | |
代表 HTML 表单中的一个按钮 | |
代表 HTML 表单中的复选框 | |
代表 HTML 表单中的文件上传 | |
代表 HTML 表单中的隐藏域 | |
代表 HTML 表单中的密码域 | |
代表 HTML 表单中的单选按钮 | |
代表 HTML 表单中的重置按钮 | |
代表 HTML 表单中的确认按钮 | |
代表 HTML 表单中的文本输入域(文本框) | |
代表 <link> 元素 | |
代表 <meta> 元素 | |
代表 <Object> 元素 | |
代表 <option> 元素 | |
代表 HTML 表单中的选择列表 | |
代表单独的样式声明 | |
代表 <table> 元素 | |
代表 <td> 元素 | |
代表 <tr> 元素 | |
代表 <textarea> 元素 |
本文根据W3C整理而出,详情信息请访问W3C查看。