Javascript 简明教程

JavaScript - Document Object

Window Document Object

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

The document object is a JavaScript object that provides the access to all elements of an HTML document. When the HTML document is loaded in the web browser, it creates a document object. It is the root of the HTML document.

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

The document object contains the various properties and methods you can use to get details about HTML elements and customize them.

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

The JavaScript document object is a property of the window object. It can be accessed using window.document syntax. It can also be accessed without prefixing window object.

JavaScript Document Object Properties

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

The JavaScript Document Object represents the entire HTML document, and it comes with several properties that allow us to interact with and manipulate the document. Some common Document object properties are as follows –

document.title − Gets or sets the title of the document.
document.URL − Returns the URL of the document.
document.body − Returns the <body> element of the document.
document.head − Returns the <head> element of the document.
document.documentElement − Returns the <html> element of the document.
document.doctype − Returns the Document Type Declaration (DTD) of the document.

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

These properties provide a way to access and modify different parts of the HTML document using JavaScript.

Example: Accessing the document title

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

In the example below, we use the document.title property to access the property odd the document.

<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。

In the example below, we have used the document.URL property to access the current URL of the page.

<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 文档进行交互并对其进行处理。一些常见的文档对象方法如下 –

The JavaScript Document Object provides us with various methods that allow us to interact with and manipulate the HTML document. Some common Document object methods are as follows –

getElementById(id) − Returns the element with the specified ID.
getElementsByClassName(className) − Returns a collection of elements with the specified class name.
getElementsByTagName(tagName) − Returns a collection of elements with the specified tag name.
createElement(tagName) − Creates a new HTML element with the specified tag name.
createTextNode(text) − Creates a new text node with the specified text.
appendChild(node) − Appends a node as the last child of a node.
removeChild(node) − Removes a child node from the DOM.
setAttribute(name, value) − Sets the value of an attribute on the specified element.
getAttribute(name) − Returns the value of the specified attribute on the element.

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

These methods enable us to dynamically manipulate the structure and content of the HTML document using JavaScript.

Example: Accessing HTML element using its id

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

In the example below, we use document.getElementById() method to access the DIV element with id "output" and then use the innerHTML property of the HTML element to display a message.

<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() 方法将鼠标覆盖事件添加到文档。

In the example below, we use document.addEventListener() method to add a mouseover event to the document.

<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

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

Here, we have listed all properties of the document object.

Property

Description

document.activeElement

To get the currently focused element in the HTML document.

adoptedStyleSheets

It sets the array of the newly constructed stylesheets to the document.

baseURI

To get the absolute base URI of the document.

body

To set or get the document’s <body> tag.

characterSet

To get the character encoding for the document.

childElementCount

To get a count of the number of child elements of the document.

children

To get all children of the document.

compatMode

To get a boolean value representing whether the document is rendered in the standard modes.

contentType

It returns the MIME type of the document.

To get the cookies related to the document.

currentScript

It returns the script of the document whose code is currently executing.

defaultView

To get the window object associated with the document.

designMode

To change the editability of the document.

dir

To get the direction of the text of the document.

doctype

To get the document type declaration.

documentElement

To get the <html> element.

documentURI

To set or get the location of the document.

embeds

To get all embedded (<embed>) elements of the document.

firstElementChild

To get the first child element of the document.

forms

It returns an array of <form> elements of the document.

fullScreenElement

To get the element that is being presented in the full screen.

fullScreenEnabled

It returns the boolean value, indicating whether the full screen is enabled in the document.

head

It returns the <head> tag of the document.

hidden

It returns a boolean value, representing whether the document is considered hidden.

images

It returns the collection of the <img> elements.

lastElementChild

It returns the last child element of the document.

lastModified

To get the last modified date and time of the document.

links

To get the collection of all <a> and <area> elements.

location

To get the location of the document.

readyState

To get the current state of the document.

referrer

To get the URL of the document, which has opened the current document.

scripts

To get the collection of all <script> elements in the document.

scrollingElement

To get the reference to the element which scrolls the document.

styleSheets

It returns the style sheet list of the CSSStyleSheet object.

timeLine

It represents the default timeline of the document.

title

To set or get the title of the document.

URL

To get the full URL of the HTML document.

visibilityState

It returns the boolean value, representing the visibility status of the document.

Document Object Methods List

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

The following is a list of all JavaScript document object methods −

Method

Description

addEventListener()

It is used to add an event listener to the document.

adoptNode()

It is used to adopt the node from the other documents.

append()

It appends the new node or HTML after the last child node of the document.

caretPositionFromPoint()

It returns the caretPosition object, containing the DOM node based on the coordinates passed as an argument.

close()

It closes the output stream opened using the document.open() method.

createAttribute()

It creates a new attribute node.

createAttributeNS()

It creates a new attribute node with the particular namespace URI.

createComment()

It creates a new comment node with a specific text message.

createDocumentFragment()

It creates a DocumentFragment node.

createElement()

It creates a new element node to insert into the web page.

createElementNS()

It is used to create a new element node with a particular namespace URI.

createEvent()

It creates a new event node.

createTextNode()

It creates a new text node.

elementFromPoint()

It accesses the element from the specified coordinates.

elementsFromPoint()

It returns the array of elements that are at the specified coordinates.

getAnimations()

It returns the array of all animations applied on the document.

getElementById()

It accesses the HTML element using the id.

getElementsByClassName()

It accesses the HTML element using the class name.

getElementsByName()

It accesses the HTML element using the name.

getElementsByTagName()

It accesses the HTML element using the tag name.

hasFocus()

It returns the boolean value based on whether any element or document itself is in the focus.

importNode()

It is used to import the node from another document.

normalize()

It removes the text nodes, which are empty, and joins other nodes.

open()

It is used to open a new output stream.

prepand()

It is used to insert the particular node before all nodes.

querySelector()

It is used to select the first element that matches the css selector passed as an argument.

querySelectorAll()

It returns the nodelist of the HTML elements, which matches the multiple CSS selectors.

removeEventListener()

It is used to remove the event listener from the document.

replaceChildren()

It replaces the children nodes of the document.

write()

It is used to write text, HTML, etc., into the document.

writeln()

It is similar to the write() method but writes each statement in the new line.