教程 > ES6 教程 > ES6 基础 阅读：18

ES6 HTML DOM

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

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

访问和修改文档内容的方式称为文档对象模型或 DOM。 这些对象按层次结构组织。 这种层次结构适用于 Web 文档中对象的组织。

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

es6 html dom

存在多个 DOM。 以下部分详细解释了这些 DOM 中的每一个，并描述了如何使用它们来访问和修改文档内容。

  • Legacy DOM - 这是在 JavaScript 语言的早期版本中引入的模型。 它得到所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单、表单元素和图像。
  • W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟 (W3C) 标准化。 几乎所有现代浏览器都支持此模型。
  • IE4 DOM——这个文档对象模型是在 Microsoft 的 Internet Explorer 浏览器版本 4 中引入的。 IE 5 及更高版本包括对大多数基本 W3C DOM 功能的支持。

Legacy DOM

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

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

旧版 DOM 中的文档属性

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

序号 属性 描述 示例
1 alinkColor Deprecated - 指定激活链接颜色的字符串。 示例 ：document.alinkColor
2 anchors[ ] 一组锚点对象，一个对应文档中出现的每个锚点。 示例 ：document.anchors[0]、document.anchors[1] 等
3 applets[ ] 一组 applet 对象，一个对应文档中出现的每个 applet。 示例 ：document.applets[0]、document.applets[1] 等
4 bgColor Deprecated - 指定文档背景颜色的字符串。 示例 ：document.bgColor
5 Cookie 具有特殊行为的字符串值属性，允许查询和设置与此文档关联的 cookie。 示例 ：document.cookie
6 Domain 一个字符串，指定文档来自的 Internet 域。 用于安全目的。 示例 ：document.domain
7 embeds[ ] 一组对象，表示使用 <embed> 标记嵌入到文档中的数据。 插件 [] 的同义词。 一些插件和 ActiveX 控件可以用 JavaScript 代码控制。 示例 ：document.embeds[0]、document.embeds[1] 等
8 fgColor 一个字符串，指定文档的默认文本颜色。 示例 ：document.fgColor
9 forms[ ] 一组表单对象，一个用于文档中出现的每个 HTML 表单。 示例 ：document.forms[0]、document.forms[1] 等
10 images[ ] 一组表单对象，每个表单对象对应于文档中带有 HTML <img> 标记的每个 HTML 表单。 示例 ：document.forms[0]、document.forms[1] 等
11 lastModified 一个只读字符串，指定文档最近更改的日期。 示例 ：document.lastModified
12 linkColor Deprecated - 指定未访问链接颜色的字符串。 示例 ：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 <title> 标签的文本内容。 示例 ：document.title
18 URL 指定文档 URL 的只读字符串。 示例 ：document.URL
19 vlinkColor Deprecated - 指定访问链接颜色的字符串。 示例 ：document.vlinkColor

Legacy DOM 中的文档方法

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

序号 方法 描述
1 clear( ) Deprecated - 擦除文档的内容并且不返回任何内容。
示例：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 方法访问文档属性的示例。

<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>

注意 - 此示例返回表单和元素的对象。 我们将不得不使用本教程中未讨论的那些对象属性来访问它们的值。

查看笔记

扫码一下
查看教程更方便