ES6 HTML DOM对象
ES6 HTML DOM对象
任何网页都驻留在浏览器窗口中,它可以被视为一个对象。
文档对象表示在该窗口中显示的html文档。文档对象具有各种属性，这些属性引用允许访问和修改文档内容的其他对象。
访问和修改文档内容的方式称为文档对象模型(DOM)。对象是在层次结构中组织的。这种层次结构适用于web文档中的对象的组织。
下面是几个重要对象的简单层次结构
目前存在几种DOM模型标准。以下各节详细解释每个多姆斯，并描述如何使用它们访问和修改文档内容。
遗留DOM:这是在JavaScript语言早期版本中引入的模型。它得到所有浏览器的支持，但只允许访问文档的某些关键部分，如表单、表单元素和图像。
W3C DOM:这种文档对象模型允许访问和修改所有文档内容，并由万维网联盟( W3C)标准化。几乎所有的现代浏览器都支持这个模型。
IE4 DOM:这种文档对象模型是在微软的早期浏览器IE4中引入的。IE5和更高版本支持大多数W3C DOM特性。
遗留DOM
这是在JavaScript语言的早期版本中引入的模型。它得到所有浏览器的支持，但只允许访问文档的某些关键部分，如表单、表单元素和图像。
该模型提供了几个只读属性，如title、URL和lastModified提供了有关整个文档的信息。除此之外，这个模型提供了各种方法，可以用于设置和获取文档属性值。
遗留DOM中的文档属性
下面是可以使用传统DOM访问的文档属性的列表。
1.alinkColor
已弃用 − 指定激活链接的颜色的字符串.
例子: document.alinkColor
2.anchors[ ]
一个锚对象数组，用于访问文档中的每个锚点。
例子: document.anchors[0], document.anchors[1]等等
3.applets[ ]
一个applet对象数组，用于访问文档的每个applet。
例子: document.applets[0], document.applets[1]等等
4.bgColor
已弃用 − 指定文档的背景颜色的字符串。
例子: document.bgColor
5.Cookie
一个具有特殊行为的字符串值属性，允许查询和设置与此文档关联的cookie。
例子 : document.cookie
6.Domain
指定文档的internet域的字符串。用于安全目的
例子 : document.domain
7.embeds[ ]
表示包含<embeds>标记的文档中嵌入的数据的对象数组。插件的同义词[]。一些插件和ActiveX控件可以用JavaScript代码来控制。
例子 : document.embeds[0], document.embeds[1]等等
8.fgColor
指定文档的默认文本颜色的字符串。
例子 : document.fgColor
9.forms[ ]
指定文档的默认文本颜色的字符串。
例子 : document.forms[0], document.forms[1]等等
10.images[ ]
一个表单对象数组，用于访问在文档中带有<img>标记的html元素。
例子 : document.forms[0], document.forms[1] and so on
11.lastModified
一个只读字符串，指定文档最近更改的日期。
例子 : document.lastModified
12.linkColor
已弃用 − 指定未访问链接的颜色的字符串。
例子 : document.linkColor
13.links[ ]
它是一个文档链接数组。
例子 : document.links[0], document.links[1]等等
14.Location
当前文档的URL.
例子 : document.location
15.plugins[]
embeds[]的同义词
例子 : document.plugins[0], document.plugins[1]等等
16.Referrer
一个只读字符串，包含当前文档链接的文档的URL(如果有的话)。
例子 : document.referrer
17.Title
<title>标签的文本内容,就是获取文档的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, ...)
将指定的字符串插入当前正在打开的文档中,没有返回值。
例子 : document.write( value, ...)
5.writeln( value, ...)
将指定的字符串和换行符插入当前正在打开的文档中,没有返回值。
例子 : document.writeln( value, ...)
我们可以通过html DOM在任何html文档中找到任何html元素。例如，如果一个web文档包含一个表单元素，那么使用JavaScript，我们可以将其称为document.forms[0]。如果您的web文档包括两个表单元素，则第一个表单被称为document.forms[0]，第二个表单称为document.forms[1]。
使用上面给出的层次结构和属性，我们可以使用document.forms[0]访问第一个表单元素。elements[0]等等。
例子
<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>输出
注意:此示例返回窗体和元素的对象。我们必须使用这些不在本教程中讨论的对象属性来访问它们的值。