HTML学习——HTML DOM

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanghuijunshiwo/archive/2009/06/25/1510717.html

文章标签：

#javascript #ViewUI

本文深入探讨了W3C文档对象模型（DOM）的概念及其在HTML、XML文档处理中的应用，详细介绍了DOM的组成部分和访问方法，同时阐述了DHTML作为动态网页技术的发展历程。

W3C 文档对象模型（DOM）是一个中立于语言和平台的接口，它允许程序和脚本动态地访问和更新文档的内容、结构以及样式.

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

Core DOM

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

XML DOM

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

HTML DOM

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

HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。

DOM 可以理解为结果化文档的API，提供访问了其所有元素的接口，例如javascript 就可以通过 DOM的对象（window,location等）对HTML文档进行添加、修改、删除等。

对于html而言每个元素在DOM中皆是当作一个节点，组成一个节点数，DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

节点访问：

访问方法： getElementById("id"): 无法在XML中工作。

getElementBYtagname("标签名") ：返回所有此标签的一个节点列表。

示例： document.getElementById('maindiv').getElementsByTagName("p"); 访问的是maindiv下的所有p标签的列表。

节点列表：节点列表可以存放在一个变量中，然后利用索引值进行访问。例如 nodelist = getElementBYtagname("p") ：x = nodelist[2] ;

访问根节点： document.documnetElement ,在html中还可以使用更直接的方式访问body: document.body

可以访问每个节点的上下级节点。

父节点：parentNode 第一子节点：firstChildNode 最末子节点：lastChildNode

                     示例：删除节点：       var x=document.getElementById("maindiv");
                                                    x.parentNode.removeChild(x);
              节点的信息：

NOdeName：元素节点——标签名称属性节点——属性名称文档节点——“#text” 文档节点——“#document”

NOdeTYpe: 元素——1 属性——2 文档——3 注释——8 文档——9

NodeValue: 属性——属性值文本——文本值

常见的DOM对象有：

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

对象	描述
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> 元素