Javascript 简明教程

JavaScript - DOM Methods

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

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

Syntax

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

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

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

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

JavaScript document.getElementById() Method

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

Syntax

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

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

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

Example

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

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

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

<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() 方法用于向文档添加事件。

Syntax

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

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

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

Example

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

<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 替换文档内容。

Syntax

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

document.write(HTML)

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

Example

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

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

<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”对象访问所有方法。

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() 方法，但每一行都会写入一个新的语句。