JavaScript - DOM 元素

DOM 元素

HTML DOM 元素是 Document Object Model 元素的首字母缩写词。使用 JavaScript，我们可以操作 HTM 元素。我们可以使用 id、attribute、tag name、class name 等来访问 HTML 元素。

当网页在浏览器中加载时，它会创建一个表示网页结构的 DOM 树。该网页包含各种 HTML 元素，您可以使用 JavaScript 中的属性和方法来操作这些元素。这里我们将讨论如何访问、修改或替换 DOM 元素等。

访问 DOM 元素

您可以使用不同的方法来访问 HTML 元素，如下所示。

使用其 “id” 获取 HTML 元素

在网页中，每个 HTML 元素都可以具有唯一的 id 值。您可以使用 getElementById（）方法通过 id 访问 HTML 元素。

语法

按照下面的语法使用 getElemenetById（）方法通过其 ID 访问 HTML 元素。


 document.getElementById('id')

在上面的语法中，你需要将 'id' 替换为元素的实际 id。

例

在下面的代码中，我们使用 id 访问 div 元素，并使用 'innerHTML' 属性更改其内部 HTML。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 document.getElementById('output').innerHTML =	
		 			 	"The element is accessed using the id.";
	 	</script>
</body>
</html>

输出

The element is accessed using the id.

使用 “name” 获取 HTML 元素

HTML 可以具有 'name' 属性。您可以使用 getElementByName（）方法通过 'name' 属性的值访问 HTML 元素。

语法

按照下面的语法使用 getElementByName（）方法。


 document.getElementsByName('name')

在这里，你需要将 'name' 替换为元素的 name 属性的值。

例

在下面的代码中，我们使用 name 访问 div 元素。它返回 name 作为参数传递的节点数组。


<html>
<body>
	 	<div name = "text"> Hello World! </div>
	 	<div id = "output">The content of the div elment is: 	</div>
	 	<script>
	 	 	 const divEle = document.getElementsByName('text');
	 	 	 document.getElementById("output").innerHTML += divEle[0].innerHTML;
	 	</script>
</body>
</html>

输出

Hello World!
The content of the div elment is: Hello World!

使用 “className” 获取 HTML 元素

HTML 的 class 属性包含 string 值。单个 HTML 元素也可以具有多个类。您可以使用 getElementByClassName（）方法使用多个类中的任何单个类名来访问 HTML 元素。

语法

按照下面的语法使用 getElementByClassName（）方法。


 document.getElementsByClassName('className');

在上述语法中，将 'className' 替换为 elment 的 'class' 属性的值。

例

在下面的代码中，我们使用类名访问 div 元素。


<html>
<body>
	 	<div class = "fruit"> Apple </div>
	 	<div id = "output">The name of the fruit is: </div>
	 	<script>
	 	 	 const divEle = document.getElementsByClassName('fruit');
	 	 	 document.getElementById("output").innerHTML += divEle[0].innerHTML;
	 	</script>
</body>
</html>

输出

Apple
The name of the fruit is: Apple

使用 “tag” 名称获取 HTML 元素

每个 HTML 元素都使用 HTML 标记进行定义。您可以使用标签 getElementByTagName（）方法通过标签名称访问 HTML 元素。

语法

按照下面的语法使用 getElementByTagName（）方法。


 document.getElementsByTagName('tag');

在上述语法中，将 'tag' 替换为 HTML 标签，如 'p'、'a'、'img' 等。

例

在下面的代码中，我们使用 getElementTagName（）方法访问 <p> 元素。

它返回 <p> 元素的 Nodelist。


<html>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragrraph.</p>
<div id = "output"> </div>
<script>
	 	const numbers = document.getElementsByTagName('p');
	 	document.getElementById("output").innerHTML =	
	 	"The first 'p' element is: " + numbers[0].innerHTML + "<br>" +	
	 	"The second 'p' element is: " + numbers[1].innerHTML;
</script>
</body>
</html>

输出

This is the first paragraph.

This is the second paragrraph.

The first 'p' element is: This is the first paragraph.
The second 'p' element is: This is the second paragrraph.

修改 DOM 元素

JavaScript 允许您修改和替换 HTML DOM 元素。

在本节中，我们将介绍如何修改 DOM 元素的内容和替换子元素。

修改 DOM 元素的内容

您可以使用元素的 'textContent' 属性来修改 HTML 元素的文本。但是，您可以使用其他属性（如 innerHTML、outerHTML、outerText 等）来修改 HTML 元素的内容。

语法

按照下面的语法使用 textContent 属性修改 HTML 元素的文本内容。


 element.textContent = newText;

在上面的语法中，我们已将 'newText' 动态值分配给 'textContent' 属性，以更新 'element' 的内容。

例

在输出中，当您单击该按钮时，它将调用 updateText（）函数并使用 textContent 属性来更改 div 元素的文本。


<html>
<body>
	 	<button onclick = "updateText()"> Update Text </button>
	 	<p id = "text"> Hello World! </p>
	 	<script>
	 	 	 function updateText() {
	 	 	 	 	document.getElementById("text").textContent = "This is updaetd text!";
	 	 	 }
	 	</script>
</body>
</html>

替换 Child 元素

在 JavaScript 中，您可以使用 replaceChild（）方法替换特定 HTML 元素的子元素。

语法

按照下面的语法在 JavaScript 中使用 replaceChild（）方法。


 textDiv.replaceChild(newNode,replacableNode);

replaceChild（）方法将新节点作为第一个参数，将需要替换的节点作为第二个参数。

例

在下面的代码中，我们使用 replaceChild（）方法将 div 元素的第二个子元素替换为新节点。在这里，我们还使用 createTextNode（）创建了一个带有 'Hello World！' 文本的新节点。


<html>
<body>
	 	<button onclick = "replaceText()"> Replace Child </button>
	 	<div id = "text">
	 	 	 <p> Hi Users! </p>
	 	</div>
	 	<script>
	 	 	 function replaceText() {
	 	 	 	 	let textDiv = document.getElementById("text");
	 	 	 	 	let newText = document.createTextNode("Hello World");
	 	 	 	 	textDiv.replaceChild(newText, textDiv.childNodes[1]);
	 	 	 }
	 	</script>
</body>
</html>

向 DOM 元素添加事件

您可以使用 addEventListner（）方法将事件添加到 DOM 元素中，以便与 HTML 元素进行交互。

语法

按照以下语法使用 addEventListner（）方法。


 element.addEventListener(eventName, callback);

addEventListner（）方法将事件名称作为第一个参数，将回调函数作为第二个参数。

例

我们在下面的代码中添加了 div 元素上的 click 事件。每当你点击 div 元素时，它都会在网页上打印一条消息。


<html>
<body>
	 	<div id = "text" style = "background-color: red;color:white">
	 	 	 <p> Some text </p>
	 	 	 <p> Some other text </p>
	 	</div>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 let text = document.getElementById("text");
	 	 	 text.addEventListener("click", function () {
	 	 	 	 	document.getElementById("output").innerHTML =	
		 			 			 	"You clicked on the div element";
	 	 	 });
	 	</script>
</body>
</html>

DOM 元素属性列表

下表包含可用于 JavaScript 中的 HTML 元素的属性。

属性	描述
accessKey	用于访问或设置 HTML 元素的 accessKey 属性。
attributes	以 NamedNodeMap 格式返回元素的所有属性。
childElementCount	返回特定 HTML 元素的子元素的总数。
childNodes	用于获取特定 HTML 元素的子节点的 NodeList。
children	用于获取 HTML 元素的子节点的 HTML 集合。
classList	返回包含 HTML 元素的类名数组。
className	获取或设置 class 属性的值。
clientHeight	获取 HTML 元素的高度。（包括填充物）
clientLeft	获取左边框的宽度。
clientTop	获取右边框的宽度。
clientWidth	获取 HTML 元素的宽度。（包括填充物）
contentEditable	设置布尔值，该值表示 HTML 元素的内容是否应可编辑。
dir	将文本的方向设置或获取为 ltr （从左到右）或 rtl （从右到左）。
firstChild	获取元素的第一个子节点。
firstElementChild	获取特定 HTML 元素的第一个子元素。
id	获取或设置 'id' 属性的值。
innerHTML	获取或更新元素的 HTML。
innerText	设置或获取 HTML 元素及其子元素的文本内容。
isContentEditable	根据内容是否可编辑返回一个布尔值。
isDefaultNamespace()	根据命名空间 URI 返回一个布尔值，该值与 default 相同。
lang	设置或获取 lang 属性的值。
lastChild	获取 HTML 元素的最后一个子节点。
lastElementChild	获取 HTML 元素的最后一个子元素。
namespaceURI	获取树的 namespaceURI。
nextSibling	获取 DOM 树中同一级别的下一个节点。
nextElementSibling	获取 DOM 树中同一级别的下一个 HTML 元素。
nodeName	获取节点的名称。
nodeType	获取节点的类型。
nodeValue	获取或设置节点的值。
offsetHeight	获取元素的高度。它包括内边距、边框和滚动条。
offsetWidth	获取元素的宽度。它包括内边距、边框和滚动条。
offsetLeft	获取 HTML 元素的水平偏移位置。
offsetParent	获取 HTML 元素的 offset 容器。
offsetTop	获取 HTML 元素的垂直偏移位置。
outerHTML	设置或获取外部 HTML。它包括 start 和 end 标记。
outerText	设置或获取 HTML 元素的外部文本。
ownerDocument	获取文档的根元素。
parentNode	获取 HTML 元素的父 Node。
parentElement	获取 HTML 元素的父元素。
previousSibling	获取 DOM 树中同一级别的前一个节点。
previousElementSibling	获取 DOM 树中同一级别的前一个元素。
scrollHeight	获取元素的可滚动高度，包括内边距。
scrollLeft	要通过该元素获取或设置像素数，内容将水平滚动。
scrollTop	若要通过该元素获取或设置像素数，将垂直滚动内容。
scrollWidth	获取元素的可滚动宽度，包括内边距。
style	设置或获取元素的样式。
tabIndex	设置或获取 tabIndex 属性的值。
tagName	获取标签名称。
textContent	获取 HTML 元素的文本。
title	设置或获取元素的标题。

DOM 元素方法列表

下表包含可用于 HTML 元素以在 JavaScript 中操作它们的方法。

方法	描述
addEventListener()	向 HTML 元素添加事件处理程序。
appendChild()	在 HTML 元素的最后一个节点处添加新的子元素。
blur()	从 HTML 元素中删除焦点。
click()	单击元素。
cloneNode()	克隆元素。
closest()	根据 CSS 选择器在 DOM 树中查找最近的元素。
compareDocumentPosition()	比较两个 HTML 元素的文档位置。
contains()	检查 HTML 节点是否包含特定节点。
focus()	将焦点放在 HTML 元素上。
getAttribute()	获取 HTML 元素的特定属性的值。
getAttributeNode()	获取 attribute 节点。
getBoundingClientRect()	获取元素相对于视区的大小和位置。
getElementById()	通过 id 访问 HTML 元素。
getElementByName()	使用其名称访问 HTML 元素。
getElementsByClassName()	获取与类名匹配的子 HTML 元素的集合。
getElementsByTagName()	获取与标签名称匹配的子 HTML 元素的集合。
hasAttribute()	检查 HTML 元素是否包含特定属性。
hasAttributes()	检查 HTML 元素是否包含至少 1 个属性。
hasChildNodes()	检查 HTML 元素是否具有子节点。
insertAdjacentElement()	在相对于元素的位置添加 HTML 元素。
insertAdjacentHTML()	在相对于元素的位置插入 HTML。
insertAdjacentText()	在相对于文本的位置插入文本。
insertBefore()	在现有子节点之前插入另一个子节点。
isEqualNode()	检查两个节点是否相等。
isSameNode()	检查两个元素是否为同一节点。
matches()	根据元素是否与 CSS 选择器匹配返回布尔值。
querySelector()	访问与 CSS 选择器匹配的第一个元素。
querySelectorAll()	访问与 CSS 选择器匹配的所有元素。
remove()	用于从 DOM 中删除元素。
removeAttribute()	从元素返回特定属性。
removeAttributeNode()	将删除属性节点。
removeChild()	会从元素中删除子节点。
removeEventListener()	用于从元素中删除事件侦听器。
replaceChild()	用于替换特定的子节点。
scrollIntoView()	会在视区或浏览器的可见区域中滚动元素。
setAttribute()	更新特定属性的值。
setAttributeNode()	设置或更新属性节点。

打印本页