- ES6 教程
- ES6 - 首页
- ES6 - 概述
- ES6 - 环境搭建
- ES6 - 语法
- ES6 - 变量
- ES6 - 运算符
- ES6 - 决策语句
- ES6 - 循环语句
- ES6 - 函数
- ES6 - 事件
- ES6 - Cookie
- ES6 - 页面跳转
- ES6 - 对话框
- ES6 - void 关键字
- ES6 - 页面打印
- ES6 - 对象
- ES6 - 数字
- ES6 - 布尔值
- ES6 - 字符串
- ES6 - Symbol
- ES6 - 新的字符串方法
- ES6 - 数组
- ES6 - 日期
- ES6 - 数学对象
- ES6 - 正则表达式
- ES6 - HTML DOM
- ES6 - 迭代器
- ES6 - 集合
- ES6 - 类
- ES6 - Map 和 Set
- ES6 - Promise
- ES6 - 模块
- ES6 - 错误处理
- ES6 - 对象扩展
- ES6 - Reflect API
- ES6 - Proxy API
- ES6 - 数据验证
- ES6 - 动画
- ES6 - 多媒体
- ES6 - 调试
- ES6 - 图片地图
- ES6 - 浏览器
- ES7 - 新特性
- ES8 - 新特性
- ES9 - 新特性
- ES6 有用资源
- ES6 - 快速指南
- ES6 - 资源推荐
- ES6 - 讨论
ES6 - HTML DOM
每个网页都位于浏览器窗口内,浏览器窗口可以被视为一个对象。
一个文档对象代表显示在该窗口中的 HTML 文档。文档对象具有各种属性,这些属性引用其他对象,从而允许访问和修改文档内容。
访问和修改文档内容的方式称为文档对象模型,或DOM。这些对象以层次结构组织。这种层次结构适用于网页文档中对象的组织。
以下是一些重要对象的简单层次结构:
目前存在多个 DOM。以下部分将详细解释每个 DOM,并描述如何使用它们来访问和修改文档内容。
传统 DOM - 这是在早期版本的 JavaScript 语言中引入的模型。它受到所有浏览器的良好支持,但只能访问文档的某些关键部分,例如表单、表单元素和图像。
W3C DOM - 此文档对象模型允许访问和修改所有文档内容,并由万维网联盟 (W3C) 标准化。该模型几乎受到所有现代浏览器的支持。
IE4 DOM - 此文档对象模型是在 Microsoft Internet Explorer 浏览器的版本 4 中引入的。IE 5 及更高版本支持大多数基本的 W3C DOM 功能。
传统 DOM
这是在早期版本的 JavaScript 语言中引入的模型。它受到所有浏览器的良好支持,但只能访问文档的某些关键部分,例如表单、表单元素和图像。
此模型提供了一些只读属性,例如 title、URL 和 lastModified,这些属性提供有关整个文档的信息。除此之外,此模型还提供了各种方法,可用于设置和获取文档属性值。
传统 DOM 中的文档属性
以下是可以使用传统 DOM 访问的文档属性列表。
| 序号 | 属性及说明 |
|---|---|
| 1 |
alinkColor 已弃用 - 指定活动链接颜色的字符串。 示例:document.alinkColor |
| 2 |
anchors[ ] 锚点对象的数组,每个锚点在文档中出现一个。 示例:document.anchors[0]、document.anchors[1] 等等 |
| 3 |
applets[ ] 小程序对象的数组,每个小程序在文档中出现一个。 示例:document.applets[0]、document.applets[1] 等等 |
| 4 |
bgColor 已弃用 - 指定文档背景颜色的字符串。 示例:document.bgColor |
| 5 |
Cookie 具有特殊行为的字符串值属性,允许查询和设置与此文档关联的 Cookie。 示例:document.cookie |
| 6 |
Domain 指定文档来源的互联网域名的字符串。用于安全目的。 示例:document.domain |
| 7 |
embeds[ ] 表示使用 示例:document.embeds[0]、document.embeds[1] 等等 |
| 8 |
fgColor 指定文档默认文本颜色的字符串。 示例:document.fgColor |
| 9 |
forms[ ] 表单对象的数组,文档中每个 HTML 表单出现一个。 示例:document.forms[0]、document.forms[1] 等等 |
| 10 |
images[ ] 表单对象的数组,文档中每个带有 HTML 示例:document.forms[0]、document.forms[1] 等等 |
| 11 |
lastModified 指定文档最近更改日期的只读字符串。 示例:document.lastModified |
| 12 |
linkColor 已弃用 - 指定未访问链接颜色的字符串。 示例:document.linkColor |
| 13 |
links[ ] 这是一个文档链接数组。 示例:document.links[0]、document.links[1] 等等 |
| 14 |
Location 文档的 URL。已弃用,推荐使用 URL 属性。 示例:document.location |
| 15 |
plugins[ ] embeds[ ] 的同义词 示例:document.plugins[0]、document.plugins[1] 等等 |
| 16 |
Referrer 一个只读字符串,包含当前文档链接到的文档(如果有)的 URL。 示例:document.referrer |
| 17 |
Title 示例:document.title |
| 18 |
URL 指定文档 URL 的只读字符串。 示例:document.URL |
| 19 |
vlinkColor 已弃用 - 指定已访问链接颜色的字符串。 示例:document.vlinkColor |
传统 DOM 中的文档方法
以下是传统 DOM 支持的方法列表。
| 序号 | 属性及说明 |
|---|---|
| 1 |
clear( ) 已弃用 - 清除文档内容并返回空。 示例:document.clear( ) |
| 2 |
close( ) 关闭使用 open( ) 方法打开的文档流并返回空。 |
| 3 |
open( ) 删除现有文档内容并打开一个流,新文档内容可以写入该流。返回空。 示例:document.open( ) |
| 4 |
write( value, ...) 将指定的字符串插入到当前正在解析的文档中,或追加到使用 open( ) 打开的文档中。返回空。 示例:document.write( value, ...) |
| 5 |
writeln( value, ...) 与 write( ) 相同,只是它将换行符追加到输出中。返回空。 示例:document.writeln( value, ...) |
我们可以使用 HTML DOM 找到任何 HTML 文档中的任何 HTML 元素。例如,如果网页文档包含表单元素,则可以使用 JavaScript 将其称为 document.forms[0]。如果您的网页文档包含两个表单元素,则第一个表单称为 document.forms[0],第二个表单称为 document.forms[1]。
使用上面给出的层次结构和属性,我们可以使用 document.forms[0].elements[0] 等访问第一个表单元素。
示例
以下是如何使用传统 DOM 方法访问文档属性的示例。
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("Document Title : " + ret );
var ret = document.URL;
alert("Document URL : " + ret );
var ret = document.forms[0];
alert("Document First Form : " + ret );
var ret = document.forms[0].elements[1];
alert("Second element : " + ret );
} //
-->
</script>
</head>
<body>
<h1 id = "title">This is main title</h1>
<p>Click the following to see the result:</p>
<form name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>
输出
在上述代码成功执行后,将显示以下输出。
注意 - 此示例返回表单和元素的对象。我们将必须使用本教程中未讨论的那些对象属性来访问它们的值。