HTML学习——HTML DOM
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> 元素 |
DTHML: DHTML 并不是W3C维护的标准,而是一种营销上采用的技术术语。被网景公司(Netscape)和微软公司用来描述 4.x 代浏览器应当支持的新技术。
DHTML 是一种用来创建动态站点的技术组合物。对大多数人来说,DHTML 意味着 HTML 4.0、样式表以及 JavaScript 的结合物。W3C 曾讲过:“动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式表以及脚本的结合物的术语。”