教程 > es6 教程 > 阅读：30

es6 html dom——迹忆客-ag捕鱼王app官网

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

文档对象表示显示在该窗口中的 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[ ] 一组对象，表示使用 标记嵌入到文档中的数据。 插件 [] 的同义词。 一些插件和 activex 控件可以用 javascript 代码控制。 示例 ：document.embeds[0]、document.embeds[1] 等
8 fgcolor 一个字符串，指定文档的默认文本颜色。 示例 ：document.fgcolor
9 forms[ ] 一组表单对象，一个用于文档中出现的每个 html 表单。 示例 ：document.forms[0]、document.forms[1] 等
10 images[ ] 一组表单对象，每个表单对象对应于文档中带有 html 标记的每个 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 标签的文本内容。</td> <td><strong>示例</strong> ：document.title</td> </tr> <tr> <td align="center">18</td> <td>url</td> <td>指定文档 url 的只读字符串。</td> <td><strong>示例</strong> ：document.url</td> </tr> <tr> <td align="center">19</td> <td>vlinkcolor</td> <td>deprecated - 指定访问链接颜色的字符串。</td> <td><strong>示例</strong> ：document.vlinkcolor</td> </tr> </tbody></table> <hr> <h2 id="legacy-dom-中的文档方法">legacy dom 中的文档方法</h2> <p>以下是 legacy dom 支持的方法列表。</p> <table> <thead> <tr> <th align="center">序号</th> <th>方法</th> <th>描述</th> </tr> </thead> <tbody><tr> <td align="center">1</td> <td>clear( )</td> <td>deprecated - 擦除文档的内容并且不返回任何内容。 <br />示例：document.clear( )</td> </tr> <tr> <td align="center">2</td> <td>close( )</td> <td>关闭用 open() 方法打开的文档流，不返回任何内容。</td> </tr> <tr> <td align="center">3</td> <td>open( )</td> <td>删除现有文档内容并打开可以写入新文档内容的流。 什么都不返回。<br />示例：document.open( )</td> </tr> <tr> <td align="center">4</td> <td>write( value, ...)</td> <td>将指定的一个或多个字符串插入到当前正在解析的文档中，或者附加到使用 open() 打开的文档中。 什么都不返回。<br />示例：document.write(value, ...)</td> </tr> <tr> <td align="center">5</td> <td>writeln( value, ...)</td> <td>与 write( ) 相同，只是它在输出中附加了一个换行符。 什么都不返回。<br />示例：document.writeln( value, ...)</td> </tr> </tbody></table> <p>我们可以使用 html dom 在任何 html 文档中定位任何 html 元素。 例如，如果 web 文档包含一个表单元素，那么使用 javascript，我们可以将其称为 <code>document.forms[0]</code>。 如果我们的 web 文档包含两个表单元素，则第一个表单称为 <code>document.forms[0]</code>，第二个称为 <code>document.forms[1]</code>。</p> <p>使用上面给出的层次结构和属性，我们可以使用 <code>document.forms[0].elements[0]</code> 等访问第一个表单元素。</p> <h3 id="示例">示例</h3> <p>以下是使用 legacy dom 方法访问文档属性的示例。</p> <pre><code class="language-html"><html> <head> <title> document title

click the following to see the result:

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

查看笔记

扫码一下
查看教程更方便
网站地图