JavaScript - DOM Document

JavaScript DOM Document 文档

JavaScript DOM document 文档对象拥有网页中的所有对象。它代表网页本身。当网页在浏览器中加载时，它会创建一个 HTML DOM"document"对象。它是 HTML 文档的根。

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

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

访问 DOM 文档对象

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

window.document

或者直接使用

document

这个交互式示例将帮助您理解 document.getElementById() 方法的工作原理。

JavaScript DOM 文档方法

JavaScript DOM 文档方法列表如下:-

序号	方法及说明
1.	writeln() 此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。它在每个语句后添加一个换行符。
2.	write() 此方法提供将 HTML 或 JavaScript 表达式直接写入文档的功能。
3.	hasFocus() 用于判断文档或文档内的任何元素是否具有焦点。
4.	renameNode() 该方法用于重命名节点。
5.	open() 此方法打开一个文档进行写入。
6.	normalizeDocument() 此方法规范化整个 HTML 文档。
7.	normalize() 该方法移除空文本节点，并连接父节点的相邻文本节点。
8.	adoptNode() 该方法将另一个文档中的节点纳入当前文档。
9.	addEventListener() 该方法用于设置一个函数，每当指定的事件传递到目标。
10.	execCommand() 此方法用于执行用户所选可编辑部分上指定的命令。
11.	createTextNode() 此方法用于创建包含指定文本的文本节点。
12.	createEvent() 用于创建一个事件对象，其事件类型在参数中指定。
13.	createDocumentFragment() 创建一个新的空文档片段，该片段驻留在内存中。
14.	createComment() 此方法用于创建包含给定文本的注释节点。
15.	createAttribute() 此方法用于使用 JavaScript 为 HTML 元素创建具有特定名称的属性，并返回 Attr 对象。
16.	close() 关闭输出流。
20.	getElementsByTagName() 这是一个只读方法，用于获取文档中所有具有指定标签名称的元素集合。
21.	getElementsByName() 此方法用于返回具有参数中指定的 name 属性的元素集合。
22.	getElementsByClassName() 此方法用于获取文档中指定类名的所有元素的集合。
23.	getElementById() 返回指定 ID 的元素。
24.	createElement() 此方法通过标签名或元素名创建指定的 HTML 元素。

JavaScript DOM 文档属性

下表列出了 JavaScript DOM 文档属性−

序号	属性 &说明
1.	URL 这是一个只读属性，用于返回包含协议的文档完整 URL。
2.	title 此属性用于设置或获取文档的标题。
3.	strictErrorChecking 它用于确定文档是否强制执行严格的错误检查。
4.	scripts 这是一个只读属性，用于以集合形式返回 HTML 文档中存在的所有脚本元素。
5.	links links 是一个只读属性，它返回与具有 href 属性的 a 和 area 元素对应的所有链接的集合。
6.	lastModified 此属性返回当前文档上次修改的日期和时间。
7.	inputEncoding inputEncoding 属性返回一个表示文档字符编码的字符串。
8.	implementation 这将返回与当前文档关联的 DOMImplementation 对象。
9.	images 这是一个只读属性，用于以集合形式返回 HTML 文档中存在的所有 img 元素。
10.	head head 属性返回 HTML 头部元素。
11.	forms forms 是一个只读属性，用于将 HTML 文档中存在的所有表单元素作为集合返回。
12.	embeds 这是一个只读属性，用于将 HTML 文档中存在的所有 embed 元素作为集合返回。
13.	domConfig 此属性已弃用，因为在所有新浏览器中都会返回 undefined。
14.	domain 用于获取当前正在执行文档的服务器的域名。
15.	documentURI 此属性用于设置或返回文档的位置。
16.	documentMode documentMode 属性是 IE8 的一个属性，用于确定浏览器使用的渲染模式。
17.	documentElement 它将 documentElement 作为 Element 对象返回。
18.	doctype 此属性返回与当前 HTML 文档关联的 DTD(文档类型声明)。
19.	designMode 它帮助我们确定整个文档是否可编辑。
20.	defaultView 它用于返回文档的窗口对象。
21.	cookie HTML DOM 文档的 Cookie 属性用于创建、读取和删除 Cookie。
22.	charset 它返回 HTML 文档的字符编码。
23.	applets 它用于返回文档中所有 applets 元素的列表，但此属性现已弃用。
24.	characterSet 此属性用于获取文档的字符编码。
25.	anchors anchors 属性是一个只读属性，它列出了文档中所有带有 name 属性的"a"标签。
26.	baseURI 它用于返回文档的基本统一资源标识符 (URI)。

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

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 属性

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

语法

请按照以下语法在 JavaScript 中使用文档的"links"属性。

document.links;

示例

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

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

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

文档标题属性

在 JavaScript 中，DOM 文档标题属性返回网页的标题。

语法

请按照以下语法访问网页的 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

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数

JavaScript 对象

面向对象的 JavaScript

JavaScript 版本

JavaScript 异步

JavaScript Cookies

JavaScript 浏览器 BOM

JavaScript Web APIs

JavaScript 事件

JavaScript 错误处理

JavaScript 重要关键字

JavaScript HTML DOM

JavaScript 高级章节

JavaScript 杂项

JavaScript 实用资源

JavaScript - DOM Document