在 JavaScript 中，DOM 方法用于对 HTML 元素执行特定操作。DOM 表示具有逻辑树的 HTML 文档或网页。在树中，每个分支都以一个节点结尾，每个节点都包含对象。DOM 方法允许我们以编程方式访问树。使用 DOM 方法，您可以更改文档的结构、样式或内容。
例如，您可以使用 DOM 方法通过 id、属性、标记名称、类名称等访问 HTML 元素，向文档或 HTML 元素添加事件，向 DOM 添加新的 HTML 元素等。
语法
以下是在 JavaScript 中访问和执行 DOM 方法的语法 -
window.document.methodName();
OR
document.methodName();
你可以使用也可能不使用 'window' 对象来访问 document 对象的方法。
在这里，我们通过示例解释了一些 HTML DOM 方法，并在参考中介绍了其他方法。
JavaScript document.getElementById（） 方法
document 对象的 JavaScript getElementById（） 方法是使用 id 访问 HTML 元素的最流行方法。
语法
按照下面的语法使用 document.getElementById（） 方法。
const ele = document.getElementById("id");
getElementById（） 方法将 HTML 元素的 id 作为参数。
例在下面的代码中，'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（） 方法
addEventListener（） 方法用于将事件添加到文档中。
语法
按照下面的语法对文档使用 addEventListener（） 方法。
document.addEventListener('mouseover', function () {
// 对文档执行操作。
});
addEventListener（） 方法将事件名称作为第一个参数，将回调函数作为第二个参数。
例在下面的代码中，我们向文档添加了 '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（） 方法
document.write（） 方法将文本或 HTML 添加到文档中。它将文档的内容替换为作为方法参数传递的 HTML。
语法
按照下面的语法使用 document.write（） 方法。
document.write(HTML)
您可以将 'HTML' 参数替换为文本或 HTML。
例在下面的代码中，当您单击按钮时，我们将执行 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>
DOM 方法列表
在下表中，我们列出了与 HTML DOM 相关的所有方法。你可以使用 'document' 对象访问所有方法。
| 方法 | 描述 |
|---|---|
| addEventListener() | 用于向文档添加事件侦听器。 |
| adoptNode() | 用于从其他文档中采用节点。 |
| append() | 将新节点或 HTML 附加到文档的最后一个子节点之后。 |
| caretPositionFromPoint() | 返回 caretPosition 对象，其中包含基于作为参数传递的坐标的 DOM 节点。 |
| close() | 将关闭使用 document.open（） 方法打开的输出流。 |
| createAttribute() | 将创建一个新的属性节点。 |
| createAttributeNS() | 创建一个具有特定命名空间 URI 的新属性节点。 |
| createComment() | 创建一个包含特定文本消息的新注释节点。 |
| createDocumentFragment() | 创建一个 DocumentFragment 节点。 |
| createElement() | 创建一个新的元素节点以插入到网页中。 |
| createElementNS() | 创建具有特定命名空间 URI 的新元素节点。 |
| createEvent() | 创建一个新的事件节点。 |
| createTextNode() | 创建一个新的文本节点。 |
| elementFromPoint() | 从指定的坐标访问元素。 |
| elementsFromPoint() | 返回位于指定坐标处的元素数组。 |
| getAnimations() | 返回应用于文档的所有动画的数组。 |
| getElementById() | 使用 id 访问 HTML 元素。 |
| getElementsByClassName() | 使用类名访问 HTML 元素。 |
| getElementsByName() | 使用名称访问 HTML 元素。 |
| getElementsByTagName() | 使用标签名称访问 HTML 元素。 |
| hasFocus() | 根据任何元素或文档本身是否在焦点中返回布尔值。 |
| importNode() | 用于从另一个文档导入节点。 |
| normalize() | 将删除空的文本节点，并连接其他节点。 |
| open() | 用于打开新的输出流。 |
| prepand() | 用于在所有节点之前插入特定节点。 |
| querySelector() | 用于选择与作为参数传递的 css 选择器匹配的第一个元素。 |
| querySelectorAll() | 返回 HTML 元素的 nodelist，该 nodelist 与多个 CSS 选择器匹配。 |
| removeEventListener() | 用于从文档中删除事件侦听器。 |
| replaceChildren() | 替换文档的子节点。 |
| write() | 用于将文本、HTML 等写入文档。 |
| writeln() | 类似于 write（） 方法，但将每个语句写入新行。 |
