Javascript 简明教程

JavaScript - DOM Document

HTML DOM Document

HTML DOM 文档对象拥有网页中的所有对象。它表示网页。当网页在网络浏览器中加载时，它创建一个 HTML DOM “文档”对象。它是 HTML 文档的根。

The HTML DOM document object owns all objects in the webpage. It represents the webpage. When the webpage is loaded in the web browser, it creates an HTML DOM 'document' object. It is the root of the HTML document.

DOM 文档对象包含你可以用于获取有关 HTML 元素的详细信息并自定义它们的各种属性和方法。有了文档对象，JavaScript 就可以访问和更改文档的结构、内容或样式。

The DOM document object contains the various properties and methods you can use to get details about HTML elements and customize them. With document objects, JavaScript can access, and change document’s structure, content or style.

要访问任何 HTML 元素，你应该始终从访问 DOM 文档对象开始。

To access any HTML element, you should always start accessing with the DOM document object.

Accessing DOM Document Object

网页表示为 DOM 文档对象。如果我们希望访问网页中的任何元素，我们需要首先访问文档对象。在 JavaScript 中，文档对象是 window 对象的属性。因此，我们可以使用 window.document 语法作为 window 对象的属性来访问文档对象。我们也可以在不编写 window 的情况下访问它。

The webpage is represented as the DOM document object. If we want to access any element in the webpage, we need to first start accessing the document object. In JavaScript, the document object is a property of the window object. So we can access the document object as a property of window object using window.document syntax. We can also access it without writing window.

window.document
document

The DOM Document Properties

HTML DOM 文档对象为我们提供了许多属性，可用于访问和操作 HTML 元素。

The HTML DOM document object provides us with many properties that can be used to access and manipulate the HTML elements.

在此，我们列出了文档对象的所有属性。

Here, we have listed all properties of the document object.

Property

Description

activeElement

To get the currently focused element in the HTML document.

adoptedStyleSheets

It sets the array of the newly constructed stylesheets to the document.

baseURI

To get the absolute base URI of the document.

body

To set or get the document’s <body> tag.

characterSet

To get the character encoding for the document.

childElementCount

To get a count of the number of child elements of the document.

children

To get all children of the document.

compatMode

To get a boolean value representing whether the document is rendered in the standard modes.

contentType

It returns the MIME type of the document.

cookie

To get the cookies related to the document.

currentScript

It returns the script of the document whose code is currently executing.

defaultView

To get the window object associated with the document.

designMode

To change the editability of the document.

dir

To get the direction of the text of the document.

doctype

To get the document type declaration.

documentElement

To get the <html> element.

documentURI

To set or get the location of the document.

embeds

To get all embedded (<embed>) elements of the document.

firstElementChild

To get the first child element of the document.

forms

It returns an array of <form> elements of the document.

fullScreenElement

To get the element that is being presented in the full screen.

fullScreenEnabled

It returns the boolean value, indicating whether the full screen is enabled in the document.

head

It returns the <head> tag of the document.

hidden

It returns a boolean value, representing whether the document is considered hidden.

images

It returns the collection of the <img> elements.

lastElementChild

It returns the last child element of the document.

lastModified

To get the last modified date and time of the document.

links

To get the collection of all <a> and <area> elements.

location

To get the location of the document.

readyState

To get the current state of the document.

referrer

To get the URL of the document, which has opened the current document.

scripts

To get the collection of all <script> elements in the document.

scrollingElement

To get the reference to the element which scrolls the document.

styleSheets

It returns the style sheet list of the CSSStyleSheet object.

timeLine

It represents the default timeline of the document.

title

To set or get the title of the document.

URL

To get the full URL of the HTML document.

visibilityState

It returns the boolean value, representing the visibility status of the document.

在这里，我们已通过 JavaScript 中的示例解释了 HTML DOM“document”对象的一些属性。

Here, we have explained some properties of the HTML DOM 'document' object with examples in JavaScript.

Document childElementCount Property

在 JavaScript 中，document 对象的 childElementCount 属性返回文档子元素的计数。

In JavaScript, the childElementCount property of the document object returns the count of the child elements of the document.

Syntax

按照以下语法在 JavaScript 中使用 document 对象的 childElementCount 属性。

Follow the syntax below to use the childElementCount property of document object in JavaScript.

document.childElementCount;

Example

在以下代码中，childElementCount 属性返回 1，因为该文档仅包含 1 个子元素，即 <body>。body 的其他 HTML 元素为子元素。

In the below code, the childElementCount property returns 1, as the document contains only 1 child element, . Other HTML elements are the child of the body.

<html>
<body>
   <div>First Element</div>
   <div>Second Element</div>
   <div>Third Element</div>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML =
      "Total number of child elements in the document is: " + document.childElementCount;
   </script>
</body>
</html>
First Element
Second Element
Third Element
Total number of child elements in the document is: 1

Document Links Property

Document Links 属性返回文档所有链接的集合。然后，可以使用 for…​of 循环遍历链接集合。

The Document Links property returns the collection of all links of the document. After that, you can use the for…​of loop to traverse the collection of links.

Syntax

按照下面的语法在 JavaScript 中使用 document“links”属性。

Follow the syntax below to use the document 'links' property in JavaScript.

document.links;

Example

在下面的代码中，该网页包含两个 <a> 元素。我们使用 links 属性访问其 href 属性的值。

In the below code, the web page contains the two <a> elements. We access their href attribute’s value using the links property.

然后，我们使用 for…​of 循环遍历链接集合并在网页上打印它们。

After that, we used the for…​of loop to traverse the collection of links and print them on the web page.

<html>
<body>
   <div> <a href = "https://tutorialspoint.com/"> Home </a> </div>
   <div> <a href = "https://www.tutorialspoint.com/articles/category/javascript"> JavaScript </a> </div>
   <div id = "output"> </div>
   <script>
      const allLinks = document.links;
      document.getElementById("output").innerHTML += "The webpage contains the below links. <br>";
      for (let link of allLinks) {
         output.innerHTML += link + "<br>";
      }
   </script>
</body>
</html>
Home
JavaScript
The webpage contains the below links.
https://tutorialspoint.com/
https://www.tutorialspoint.com/articles/category/javascript

Document Title Property

在 JavaScript 中，DOM document title 属性返回网页的标题。

In JavaScript, the DOM document title property returns the title of the web page.

Syntax

按照以下语法访问网页的 DOM document title。

Follow the syntax below to access the DOM document title of the web page.

document.title;

Example

在下面的代码中，我们在 <head> 标记中添加了 <title> 标记。

In the below code, we have added the <title> tag in the <head> tag.

然后，我们使用文档的“title”属性访问网页的标题。

After that, we used the 'title' property of the document to access the web page’s title.

<html>
<head>
   <title> JavaScript - HTML DOM Document </title>
</head>
<body>
   <div id = "output">The title of the document is: </div>
   <script>
      document.getElementById("output").innerHTML += document.title;
   </script>
</body>
</html>
The title of the document is: JavaScript - HTML DOM Document