JavaScript - DOM 方法

上一页
下一页

在 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（） 方法，但将每个语句写入新行。
打印本页
上一页
下一页