Javascript 简明教程

JavaScript - DOM Document

HTML DOM Document

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

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

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

Accessing DOM Document Object

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

window.document

document

The DOM Document Properties

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

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

Property

Description

activeElement

要获取 HTML 文档中当前获得焦点的元素。

adoptedStyleSheets

它将新建样式表的数组设置为文档。

baseURI

要获取文档的绝对基本 URI。

body

设置或获取文档的 <body> 标记。

characterSet

要获取文档的字符编码。

childElementCount

获取文档子元素的计数。

children

获取文档的所有子元素。

compatMode

获取一个布尔值表示文档是否以标准模式渲染。

contentType

它会返回文档的 MIME 类型。

获取与文档相关的 Cookie。

currentScript

它会返回当前执行其代码的文档的脚本。

defaultView

获取与文档关联的窗口对象。

designMode

更改文档可编辑性。

dir

获取文档文本的方向。

doctype

获取文档类型声明。

documentElement

获取 <html> 元素。

documentURI

设置或获取文档位置。

embeds

获取文档的所有嵌入式 (<embed>) 元素。

firstElementChild

获取文档的第一个子元素。

forms

它会返回文档的 <form> 元素数组。

fullScreenElement

获取全屏显示的元素。

fullScreenEnabled

它会返回一个布尔值，指示文档中是否启用了全屏模式。

head

它会返回文档的 <head> 标签。

hidden

它返回一个布尔值，表示文档是否被认为是隐藏的。

images

它返回 <img> 元素的集合。

lastElementChild

它返回文档的最后一个子元素。

lastModified

获得文档的最近修改日期和时间。

links

获得所有 <a> 和 <area> 元素的集合。

location

获得文档的位置。

readyState

获得文档的当前状态。

referrer

获得打开当前文档的文档的 URL。

scripts

获得文档中所有 <script> 元素的集合。

scrollingElement

获得滚动文档的元素的引用。

styleSheets

它返回 CSSStyleSheet 对象的样式表列表。

timeLine

它表示文档的默认时间表。

title

设置或获取文档的标题。

URL

获得 HTML 文档的完整 URL。

visibilityState

它返回一个布尔值，表示文档的可见性状态。

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

Document childElementCount Property

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

Syntax

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

document.childElementCount;

Example

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

<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 循环遍历链接集合。

Syntax

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

document.links;

Example

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

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

<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 属性返回网页的标题。

Syntax

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

document.title;

Example

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

然后，我们使用文档的“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