Javascript 简明教程

JavaScript - DOM Methods

在 JavaScript 中， DOM methods 用于对 HTML 元素执行特定操作。DOM 使用逻辑树表示 HTML 文档或网页。在树中，每个分支都以 node 结尾，每个节点都包含对象。DOM methods 允许我们以编程方式访问树。使用 DOM 方法，你可以更改文档的结构、样式或内容。

In JavaScript, DOM methods are used to perform a particular action on HTML elements. The DOM represents a HTML document or web page with a logical tree. In the tree, each branch ends in a node, and each node contains objects. DOM methods allow us programmatic access to the tree. Using the DOM methods, you can change the document’s structure, style, or content.

例如，你可以使用 DOM 方法使用 id、属性、标签名称、类名称等访问 HTML 元素，为文档或 HTML 元素添加事件，将新的 HTML 元素添加到 DOM 中等。

For example, you can use DOM methods to access HTML elements using id, attribute, tag name, class name, etc., add events to the document or HTML elements, add new HTML elements to the DOM, etc.

Syntax

以下是 JavaScript 中访问和执行 DOM 方法的语法 −

Following is the syntax to access and execute the DOM method in JavaScript −

window.document.methodName();
OR
document.methodName();

你可以使用或不使用“window”对象来访问文档对象的 method。

You may or may not use the 'window' object to access the document object’s method.

这里，我们使用示例解释了一些 HTML DOM 方法，并在参考中介绍了其他方法。

Here, we have explained some HTML DOM methods with examples and covered other methods in the reference.

JavaScript document.getElementById() Method

document 对象的 JavaScript getElementById() 方法是最流行的方法，可使用 id 访问 HTML 元素。

The JavaScript getElementById() method of the document object is the most popular method to access the HTML elements using the id.

Syntax

按照以下语法使用 document.getElementById() 方法。

Follow the syntax below to use the document.getElementById() method.

const ele = document.getElementById("id");

getElementById() 方法以 HTML 元素的 id 作为参数。

The getElementById() method takes an id of the HTML element as a parameter.

Example

在下面的代码中，“div”元素的 id 是“output”。

In the below code, the id of the 'div' element is 'output'.

在 JavaScript 中，我们使用 document.getElementById() 方法使用其 id 访问 div 元素。

In JavaScript, we use the document.getElementById() method to access the div element using its id.

此外，我们使用元素的“innerHTML”属性向“div”元素添加了额外的 HTML。

Also, we use the 'innerHTML' property of the element to add extra HTML to the 'div' element.

<html>
<body>
   <button onclick = "accessEle()"> Access output and write </button>
   <p id = "output"> </p>
   <script>
      function accessEle() {
         document.getElementById("output").innerHTML =
			"Hello User! You have just clicked the button!";
      }
   </script>
</body>
</html>

JavaScript document.addEventListener() Method

addEventListener() 方法用于向文档添加事件。

The addEventListener() method is used to add the event to the document.

Syntax

按照以下语法使用文档的 addEventListener() 方法。

Follow the syntax below to use the addEventListener() method with a document.

document.addEventListener('mouseover', function () {
// Perform action on the document.
});

addEventListener() 方法将事件名称作为第一个参数，将回调函数作为第二个参数。

The addEventListener() method takes the event name as the first parameter and the callback function as a second parameter.

Example

在以下代码中，我们向文档添加了“mouseover”事件。每当您将鼠标悬停在文档上方时，它会将文档正文的背景颜色更改为红色。

In the below code, we added the 'mouseover' event to the document. Whenever you hover over the document, it will change the background color of the document body to red.

<html>
<body>
   <h3>JavaScript – document.addEventListener() Method </h3>
   <p> Hover over here to change background color </p>
   <script>
      document.addEventListener('mouseover', function () {
         document.body.style.backgroundColor = 'red';
      });
   </script>
</body>
</html>

JavaScript document.write() Method

document.write() 方法向文档添加文本或 HTML。它使用作为方法参数传递的 HTML 替换文档内容。

The document.write() method adds the text or HTML to the document. It replaces the content of the document with the HTML passed as an argument of the method.

Syntax

按照以下语法使用 document.write() 方法。

Follow the syntax below to use the document.write() method.

document.write(HTML)

您可以使用文本或 HTML 替换“HTML”参数。

You can replace the 'HTML' argument with the text or HTML.

Example

在以下代码中，我们在您单击按钮时执行 writeText() 函数。

In the below code, we execute the writeText() function when you click the button.

在函数中，我们使用 document.write() 方法向网页中添加 HTML。它替换了整个网页的 HTML。

In the function, we use the document.write() method to add HTML to the web page. It replaces the HTML of the whole web page.

<html>
<body>
   <button onclick = "writeText()"> Add HTML </button>
   <script>
      function writeText() {
         document.write("<p>Hello Users, Text is written using the document.write() method. </p>");
      }
   </script>
</body>
</html>

List of DOM Methods

在下面的表格中，我们列出了与 HTML DOM 相关的所有方法。您可以使用“document”对象访问所有方法。

In the below table, we have listed all methods related to the HTML DOM. You can access all methods using the 'document' object.

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.