JavaScript - DOM 文档

上一页
下一页

JavaScript DOM 文档

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

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

要访问任何 HTML 元素，都应始终从 DOM document 对象开始访问。

访问 DOM Document 对象

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

window.document
或者简写为
document

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

Window Document 对象

URL 属性

JavaScript DOM Document 方法

以下是 JavaScript DOM document 方法的列表：

序号 方法和描述
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 Document 属性

在下表中，我们列出了 JavaScript DOM document 属性：

序号 属性和描述
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 的 head 元素。
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

用于返回文档的 window 对象。
21. cookie

HTML DOM document cookie 属性用于创建、读取和删除 cookie。
22. charset

它返回 HTML 文档的字符编码。
23. applets

用于返回文档中所有 applet 元素的列表，但此属性现已弃用。
24. characterSet

此属性用于获取文档的字符编码。
25. anchors

anchors 属性是一个只读属性，它列出文档中所有具有 name 属性的 "a" 标签。
26. baseURI

用于返回文档的基本统一资源标识符 (URI)。

这里，我们解释了 HTML DOM 'document' 对象的一些属性，并提供了 JavaScript 示例。

Document childElementCount 属性

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

语法

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

document.childElementCount;

示例

在下面的代码中，childElementCount 属性返回 1，因为文档只包含 1 个子元素，`<body>`。其他 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 中使用 document 'links' 属性。

document.links;

示例

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

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

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

Document Title 属性

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

语法

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

document.title;

示例

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

之后，我们使用 document 的 '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
打印页面
上一页
下一页
广告