JavaScript - DOM 文档

HTML DOM 文档

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

DOM document 对象包含各种属性和方法，您可以使用这些属性和方法来获取有关 HTML 元素的详细信息并对其进行自定义。通过文档对象，JavaScript 可以访问和更改文档的结构、内容或样式。

要访问任何 HTML 元素，您应该始终使用 DOM document 对象开始访问。

访问 DOM Document 对象

网页表示为 DOM 文档对象。如果我们想访问网页中的任何元素，我们需要首先开始访问 document 对象。在 JavaScript 中，document 对象是 window 对象的一个属性。因此，我们可以使用 window.document 语法将 document 对象作为 window 对象的属性进行访问。我们也可以在没有写入窗口的情况下访问它。


 window.document

或者干脆


document

DOM 文档属性

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

在这里，我们列出了 document 对象的所有属性。

属性	描述
activeElement	获取 HTML 文档中当前聚焦的元素。
adoptedStyleSheets	将新构建的样式表的数组设置为文档。
baseURI	获取文档的绝对基 URI。
body	设置或获取文档的 <body> 标签。
characterSet	获取文档的字符编码。
childElementCount	获取文档的子元素数的计数。
children	获取文档的所有子项。
compatMode	获取一个布尔值，该值表示文档是否以标准模式呈现。
contentType	返回文档的 MIME 类型。
cookie	获取与文档相关的 Cookie。
currentScript	返回当前正在执行其代码的文档的脚本。
defaultView	获取与文档关联的 window 对象。
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	返回 CSS StyleSheet 对象的样式表列表。
timeLine	表示文档的默认时间线。
title	设置或获取文档的标题。
URL	获取 HTML 文档的完整 URL。
visibilityState	返回布尔值，表示文档的可见性状态。

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

文档 childElementCount 属性

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

语法

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


 document.childElementCount;

例

在下面的代码中，childElementCount 属性返回 1，因为文档仅包含 1 个子元素 .其他 HTML 元素是 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 属性返回文档的所有链接的集合。之后，您可以使用 for...of 循环遍历链接集合。

语法

按照下面的语法在 JavaScript 中使用文档的 'links' 属性。


 document.links;

例

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

之后，我们使用了 for...of 循环遍历链接集合并将其打印在网页上。


<html>
<body>
	 	<div> <a href = "https://qikepu.com/"> Home </a> </div>
	 	<div> <a href = "https://www.qikepu.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://qikepu.com/
https://www.qikepu.com/articles/category/javascript

文档标题属性

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

语法

按照下面的语法访问 Web 页面的 DOM 文档标题。


 document.title;

例

在下面的代码中，我们在 <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

打印本页