在 JavaScript 中，DOM 方法用于对 HTML 元素执行特定的操作。DOM 将 HTML 文档或网页表示为一棵逻辑树。在这棵树中，每个分支以一个节点结束，每个节点包含对象。DOM 方法允许我们以编程方式访问这棵树。使用 DOM 方法，您可以更改文档的结构、样式或内容。
例如，您可以使用 DOM 方法通过 id、属性、标签名称、类名等访问 HTML 元素，向文档或 HTML 元素添加事件，向 DOM 添加新的 HTML 元素等等。
语法
以下是访问并执行 DOM 方法的语法：
window.document.methodName();
或者
document.methodName();
您可以在访问文档对象的方法时使用或不使用 'window' 对象。
在这里，我们解释了一些 HTML DOM 方法，并举例说明；更多方法请参考文档。
JavaScript document.getElementById() 方法
JavaScript 中 document.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()">访问输出并写入</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() 方法</h3>
<p>悬停在此处以更改背景颜色</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()">添加 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() |
基于作为参数传递的坐标返回包含 DOM 节点的 caretPosition 对象。 |
| 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() |
用于打开新的输出流。 |
| prepend() |
用于在所有节点之前插入特定节点。 |
| querySelector() |
用于选择与作为参数传递的 CSS 选择器匹配的第一个元素。 |
| querySelectorAll() |
返回匹配多个 CSS 选择器的 HTML 元素的 nodelist。 |
| removeEventListener() |
用于从文档移除事件监听器。 |
| replaceChildren() |
替换文档的子节点。 |
| write() |
用于向文档写入文本、HTML 等。 |
| writeln() |
类似于 write() 方法，但每一句都在新的一行中写入。 |