ES 6 HTML DOM

每个web页面都驻留在一个浏览器窗口中,可以将其视为一个对象。

文档对象表示被显示在窗口中的HTML文档(HTML document)。文档对象具有引用其他对象的各种属性,这些属性允许访问和修改文档内容。

访问和修改文档内容的方法称为文档对象模型(document object model)或DOM。。对象按层次结构组织。这种层次结构适用于web文档中对象的组织。

下面是一些重要对象的简单层次结构:

存在着几个DOMS。以下各节将详细解释这些DOM,并描述如何使用它们访问和修改文档内容。

● Legacy DOM - 这是在早期版本的JavaScript语言中引入的模型。它得到了所有浏览器的良好支持,但只允许访问文档的某些关键部分,例如表单,表单元素和图像。

● W3C DOM - 此文档对象模型允许访问和修改所有文档内容,并由万维网联盟(W3C)标准化。几乎所有现代浏览器都支持此模型。

● IE4 DOM - 此文档对象模型是在Microsoft Internet Explorer浏览器的第4版中引入的。IE 5及更高版本包括对大多数基本W3C DOM功能的支持。

Legacy DOM

这是JavaScript语言早期版本中引入的模型。它得到了所有浏览器的良好支持,但只允许访问文档的某些关键部分,例如表单,表单元素和图像。

此模型提供了几个只读属性,例如title,URL和lastModified,提供有关整个文档的信息。除此之外,该模型提供了各种方法,可用于设置和获取文档属性值。

Legacy DOM中的文档属性

以下是可以使用Legacy DOM访问的文档属性列表。

Sr.No和描述
1

alinkColor

不推荐使用 - 指定激活链接颜色的字符串。

例:document.alinkColor

2

anchors[ ]

一个锚对象数组,用于文档中出现的每个锚。

例:document.anchors[0], document.anchors[1] 等

3

applets[ ]

个applet对象数组,对应于文档中出现的每个applet。

例: document.applets[0], document.applets[1] and so on

4

bgColor

不推荐使用 - 指定文档背景颜色的字符串。

例:  document.bgColor

5

Cookie

具有特殊行为的字符串值属性,允许查询和设置与此文档关联的cookie。

例: document.cookie

6

Domain

指定文档来自的Internet域的字符串。用于安全目的。

例: document.domain

7

embeds[ ]

一个对象数组,表示嵌入到文档中的带有<embed>标记的数据。plugins []的同义词。一些插件和ActiveX控件可以用JavaScript代码控制。

例:  document.embeds[0], document.embeds[1] and so on

8

fgColor

一个字符串,指定文档的默认文本颜色。

例: document.fgColor

9

forms[ ]

一个表单对象数组,用于文档中出现的每个HTML表单。

例: document.forms[0], document.forms[1] and so on

10

images[ ]

一个表单对象数组,每个HTML表单对应一个HTML 标记出现在文档中的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] and so on

14

Location

文档的URL。不推荐使用URL属性。

例: document.location

15

plugins[ ]

embeds[ ]的同义词。

例: document.plugins[0], document.plugins[1] and so on

16

Referrer

一个只读字符串,包含当前文档链接的文档的URL(如果有的话)。

例: document.referrer

17

Title

<title>标签的文本内容。

例: document.title

18

URL

一个只读字符串,用于指定文档的URL。

例:document.URL

19

vlinkColor

不推荐使用 - 指定已访问链接颜色的字符串。

例: document.vlinkColor


Legacy DOM中的文档方法

以下是Legacy DOM支持的方法列表。

Sr.No和描述
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元素。例如,如果Web文档包含表单元素,那么使用JavaScript,我们可以将其引用为document.forms [0]。 如果Web文档包含两个表单元素,则第一个表单称为document.forms [0],第二个表单称为document.forms [1]。

使用上面给出的层次结构和属性,我们可以使用document.forms [0] .elements [0]等访问第一个表单元素。

以下是使用Legacy DOM方法访问文档属性的示例。

<!DOCTYPE html>
<html> 
   <head> 
   	  <meta charset="UTF-8">
      <title> Document Title </title> 
      
      <script type = "text/javascript"> 
         <!--  
            function myFunc() {  
               var ret = document.title;  
               alert("文档标题:" + ret );  
               var ret = document.URL;  
               alert("文档的URL:" + ret );  
               var ret = document.forms[0];  
               alert("文件第一表格:" + ret );  
               var ret = document.forms[0].elements[1];  
               alert("第二个元素:" + ret );  
            } //
         --> 
      </script> 
   </head> 
   
   <body> 
      <h1 id = "title">这是主标题</h1> 
      <p>点击以下按钮查看结果:</p> 
      
      <form name = "FirstForm">
         <input type = "button" value = "点击我" onclick = "myFunc();" /> 
         <input type = "button" value = "取消"> 
      </form> 

      <form name = "SecondForm"> 
         <input type = "button" value = "不要点击我"/> 
      </form> 
   </body> 
   
</html>

成功执行上述代码后,将显示以下输出效果:

1.gif