Javascript 简明教程

JavaScript - Document Object

Window Document Object

document 对象是一个 JavaScript 对象，提供访问 HTML 文档的所有元素的方法。当 HTML 文档在网络浏览器中加载时，它创建一个 document 对象。它是 HTML 文档的根节点。

document 对象包含了各种可以用来获取 HTML 元素信息并对其进行自定义的属性和方法。

JavaScript 文档对象是 window 对象的一个属性。它的语法是 window.document。它也可以不使用 window 对象的前缀来访问。

JavaScript Document Object Properties

JavaScript 文档对象表示整个 HTML 文档，它带有多个属性，允许我们交互和操作文档。一些常见的文档对象属性如下：

document.title − 获取或设置文档的标题。
document.URL − 返回文档的 URL。
document.body − 返回文档的 <body> 元素。
document.head − 返回文档的 <head> 元素。
document.documentElement − 返回文档的 <html> 元素。
document.doctype − 返回文档的文档类型声明 (DTD)。

这些属性提供了一种使用 JavaScript 访问和修改 HTML 文档不同部分的方法。

Example: Accessing the document title

在下方的示例中，我们使用 document.title 属性来访问某个属性的文档。

<html>
<head>
   <title> JavaScript - DOM Object </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 - DOM Object

Example: Accessing the document URL

在下方的示例中，我们使用 document.URL 属性来访问当前页面的 URL。

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

The URL of the document is: https://www.tutorialspoint.com/javascript/javascript_document_object.htm

JavaScript Document Object Methods

JavaScript 文档对象提供了各种方法，让我们可以与 HTML 文档进行交互并对其进行处理。一些常见的文档对象方法如下 –

getElementById(id) - 返回具有指定 ID 的元素。
getElementsByClassName(className) - 返回具有指定类名的元素的集合。
getElementsByTagName(tagName) - 返回具有指定标签名的元素的集合。
createElement(tagName) - 创建具有指定标签名的 HTML 新元素。
createTextNode(text) - 创建具有指定文本的文本新节点。
appendChild(node) - 将节点追加为某个节点的子节点。
removeChild(node) - 从 DOM 中删除子节点。
setAttribute(name, value) - 在指定元素上设置属性的值。
getAttribute(name) - 返回指定元素上属性的值。

这些方法使我们能够使用 JavaScript 动态处理 HTML 文档的结构和内容。

Example: Accessing HTML element using its id

在下面的示例中，我们使用 document.getElementById() 方法访问具有 id“output”的 DIV 元素，然后使用 HTML 元素的 innerHTML 属性显示一个消息。

<html>
<body>
<div id = "result"> </div>
<script>
   // accessing the DIV element.
   document.getElementById("result").innerHTML +=
   "Hello User! You have accessed the DIV element using its id.";
</script>
</body>
</html>

Hello User! You have accessed the DIV element using its id.

Example: Adding an event to the document

在下面的示例中，我们使用 document.addEventListener() 方法将鼠标覆盖事件添加到文档。

<html>
<body>
   <div id = "result">
       <h2> Mouseover Event </h2>
       <p> Hover over here to change background color </p>
    </div>
   <script>
      document.addEventListener('mouseover', function () {
         document.getElementById("result").innerHTML = "Mouseover event occurred.";
      });
   </script>
</body>
</html>

Document Object Properties List

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

Property

Description

document.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

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

Document Object Methods List

以下是所有 JavaScript 文档对象方法的列表：

Method

Description

addEventListener()

它用于向文档添加事件侦听器。

adoptNode()

它用于采用来自其他文档的节点。

append()

它在文档的最后一个子节点后附加新节点或 HTML。

caretPositionFromPoint()

它返回 caretPosition 对象，该对象包含基于作为参数传递的坐标的 DOM 节点。

close()

它关闭使用 document.open() 方法打开的输出流。

createAttribute()

它创建一个新的属性节点。

createAttributeNS()

它创建一个具有特定名称空间 URI 的新属性节点。

createComment()

它创建一个具有特定文本消息的新注释节点。

createDocumentFragment()

它创建一个 DocumentFragment 节点。

createElement()

它创建一个新元素节点以插入到 web 页面中。

createElementNS()

它用于创建一个具有特定名称空间 URI 的新元素节点。

createEvent()

它创建一个新事件节点。

createTextNode()

它创建一个新文本节点。

elementFromPoint()

它从指定坐标访问元素。

elementsFromPoint()

它返回位于指定坐标的元素数组。

getAnimations()

它返回应用于文档的所有动画的数组。

getElementById()

它使用 id 访问 HTML 元素。

getElementsByClassName()

它使用类名称访问 HTML 元素。

getElementsByName()

它使用名称访问 HTML 元素。

getElementsByTagName()

它使用标签名称访问 HTML 元素。

hasFocus()

它根据任何元素或文档本身是否处于焦点来返回布尔值。

importNode()

它用于从其他文档中导入节点。

normalize()

它删除空的文本节点，并连接其他节点。

open()

用于打开一个新的输出流。

prepand()

用于将特定节点插入到所有节点之前。

querySelector()

用于选择与作为参数传递的 CSS 选择器匹配的第一个元素。

querySelectorAll()

返回与多个 CSS 选择器匹配的 HTML 元素的 nodelist。

removeEventListener()

用于从文档中移除事件侦听器。

replaceChildren()

替换文档的子节点。

write()

用于向文档中写入文本、HTML 等内容。

writeln()

类似于 write() 方法，但每一行都会写入一个新的语句。