📌  相关文章
📜  ES6-HTML DOM

📅  最后修改于: 2020-10-25 10:41:39             🧑  作者: Mango

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

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

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

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

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访问的文档属性列表。

Sr.No Property & Description
1

alinkColor

Deprecated − A string that specifies the color of activated links.

Example : document.alinkColor
2

anchors[ ]

An array of anchor objects, one for each anchor that appears in the document.

Example : document.anchors[0], document.anchors[1] and so on
3

applets[ ]

An array of applet objects, one for each applet that appears in the document.

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

bgColor

Deprecated − A string that specifies the background color of the document.

Example : document.bgColor
5

Cookie

A string valued property with special behavior that allows the cookies associated with this document to be queried and set.

Example : document.cookie
6

Domain

A string that specifies the Internet domain the document is from. Used for security purposes.

Example : document.domain
7

embeds[ ]

An array of objects that represent data embedded in the document with the tag. A synonym for plugins []. Some plugins and ActiveX controls can be controlled with JavaScript code.

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

fgColor

A string that specifies the default text color for the document.

Example : document.fgColor
9

forms[ ]

An array of form objects, one for each HTML form that appears in the document.

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

images[ ]

An array of form objects, one for each HTML form that appears in the document with the HTML tag.

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

lastModified

A read-only string that specifies the date of the most recent change to the document.

Example : document.lastModified
12

linkColor

Deprecated − A string that specifies the color of unvisited links.

Example : document.linkColor
13

links[ ]

It is a document link array.

Example : document.links[0], document.links[1] and so on
14

Location

The URL of the document. Deprecated in favor of the URL property.

Example : document.location
15

plugins[ ]

A synonym for the embeds[ ]

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

Referrer

A read-only string that contains the URL of the document, if any, from which the current document was linked.

Example : document.referrer
17

Title

The text contents of the tag.</p> <p><b>Example</b> : document.title</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">18</td> <td> <p><b>URL</b></p> <p>A read-only string that specifies the URL of the document.</p> <p><b>Example</b> : document.URL</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">19</td> <td> <p><b>vlinkColor</b></p> <p>Deprecated − A string that specifies the color of the visited links.</p> <p><b>Example</b> : document.vlinkColor</p> </td> </tr> </table> <h2>旧版DOM中的文档方法</h2> <p>以下是旧版DOM支持的方法列表。</p> <table class="table"> <tr> <th style="width:5%">Sr.No</th> <th style="text-align:center">Property & Description</th> </tr> <tr> <td style="text-align:center;vertical-align:middle">1</td> <td> <p><b>clear( )</b></p> <p>Deprecated − Erases the contents of the document and returns nothing.</p> <p><b>Example</b> : document.clear( )</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">2</td> <td> <p><b>close( )</b></p> <p>Closes a document stream opened with the open( ) method and returns nothing.</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">3</td> <td> <p><b>open( )</b></p> <p>Deletes the existing document content and opens a stream to which the new document contents may be written. Returns nothing.</p> <p><b>Example</b> : document.open( )</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">4</td> <td> <p><b>write( value, …)</b></p> <p>Inserts the specified string or strings into the document currently being parsed or appends to the document opened with open( ). Returns nothing.</p> <p><b>Example</b> : document.write( value, …)</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">5</td> <td> <p><b>writeln( value, …)</b></p> <p>Identical to write( ), except that it appends a newline character to the output. Returns nothing.</p> <p><b>Example</b> : document.writeln( value, …)</p> </td> </tr> </table> <p>我们可以使用HTML DOM在任何HTML文档中找到任何HTML元素。例如，如果一个Web文档包含一个form元素，则使用JavaScript，我们可以将其称为document.forms [0]。如果您的Web文档包含两个表单元素，则第一个表单称为document.forms [0]，第二个表单称为document.forms [1]。</p> <p>使用上面给出的层次结构和属性，我们可以使用document.forms [0] .elements [0]等访问第一个form元素。</p> <h3>例</h3> <p>以下是使用旧版DOM方法访问文档属性的示例。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><title> Document Title

This is main title

Click the following to see the result:

输出

成功执行上述代码后，将显示以下输出。

传统dom方法

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