JavaScript - DOM 元素

DOM 元素

HTML DOM 元素是文档对象模型元素的首字母缩写。使用 JavaScript，我们可以操作 HTM 元素。我们可以使用 id、属性、标签名称、类名称等访问 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 属性包含字符串值。单个 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>

替换子元素

在 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>

JavaScript DOM 元素方法列表

下表显示了 JavaScript DOM 元素方法列表 -

序号	方法及描述
1.	toString() 用于将 HTML 元素转换为字符串格式。
2.	setAttribute() 此方法允许您为特定元素定义属性。
3.	setAttributeNode() 此方法允许您在特定元素上定义特定属性节点。
4.	scrollIntoView() 它确保可滚动容器网页上的特定元素通过调整滚动位置变得可见。
5.	querySelector() 用于选择和访问文档中与给定 CSS 选择器匹配的第一个 HTML 元素。
6.	querySelectorAll() 此方法允许您选择和访问文档中与给定 CSS 选择器匹配的所有 HTML 元素。
7.	remove() 此方法可以完全从网页中删除元素。
8.	removeAttribute() 此方法用于删除已在 DOM 结构中 HTML 元素上设置的任何属性。
9.	removeAttributeNode() 它允许您从元素中删除特定的属性节点。
10.	removeChild() 用于从其父元素中删除选定的子元素。
11.	removeEventListener() 此方法允许您删除先前分配给元素的事件侦听器。
12.	replaceChild() 此方法使我们能够用另一个子元素替换父元素中的一个子元素。
13.	hasAttribute() 用于检查 HTML 元素中是否存在属性。
14.	hasAttributes() 此方法检查 HTML DOM 中的元素是否具有属性。
15.	hasChildNodes() 用于检查 HTML 元素内部是否有任何子元素。
16.	getAttribute() 它返回属于 HTML 元素的指定属性的值。
17.	getBoundingClientRect() 此方法用于获取元素的大小及其相对于视口的位置。
18.	closest() 此方法返回当前元素（或当前元素本身）与给定 CSS 选择器匹配的最接近的祖先。如果不存在这样的祖先，则返回 null。
19.	contains() 您可以使用此方法检查 DOM 元素在其子树中是否包含另一个元素。
20.	click() click() 方法在元素上激活鼠标点击。
21.	normalize() 它用于通过删除任何空文本节点来组合 HTML 元素内的相邻文本节点。
22.	isDefaultNamespace() 它用于检查特定的命名空间 URI 是否是文档或元素中元素的默认命名空间。
23.	isEqualNode() 此方法通过比较其属性、类型和子节点来检查两个节点是否相等。
24.	isSameNode() 它检查两个节点引用是否指向 HTML 文档中的同一个节点对象。
25.	isSupported() 此方法用于检查 Web 浏览器是否可以支持或处理网页上的特定功能。
26.	insertAdjacentElement() 此方法允许您在网页上相对于另一个元素的位置精确插入新的 HTML 元素。
27.	insertBefore() 此方法允许您在父元素内添加新的子元素，并指定其相对于另一个子元素的位置。
28.	blur() 此方法允许您动态地从 HTML DOM 中的元素中移除焦点。
29.	matches() 此方法检查元素是否与给定的 CSS 选择器匹配。
30.	insertAdjacentHTML() 它帮助您在相对于调用此方法的元素的特定位置插入指定的 HTML 代码。
31.	addEventListener() 它用于向元素注册事件处理程序。
32.	cloneNode() 它复制节点，包括其属性和子节点。
33.	appendChild() 此方法用于将新的子节点（元素）作为指定父节点的最后一个子节点添加。
34.	compareDocumentPosition() 它可以通过比较两个 DOM 元素（节点）的位置来理解文档结构，并返回一个位掩码（数值）。
35.	focus() 此方法将焦点设置到特定的网页元素。
36.	getAttributeNode() 它用于获取属性节点对象。
37.	getBoundingClientRect() 此方法用于获取元素的大小及其相对于视口的位置。
38.	getElementsByClassName() 此方法检索与文档或特定元素中指定的类名匹配的元素的实时 HTMLCollection。
39.	getElementsByTagName() 它检索与指定标签名称匹配的元素的实时 HTMLCollection。
40.	insertAdjacentText() 它允许您在相对于调用此方法的元素的特定位置插入文本内容。

JavaScript DOM 元素属性列表

下表包含 JavaScript DOM 元素属性列表 -

序号	属性及描述
1.	title 它帮助我们访问和更新存储在元素的 title 属性中的值。
2.	textContent 此属性用于访问和更新 HTML 元素及其所有子元素的文本内容，作为一个字符串。
3.	tagName 它以大写形式提供定义网页上元素的 HTML 标签的名称。
4.	style 使用此属性，您可以获取直接为特定元素设置的 CSS 样式。
5.	tabIndex 它用于访问和更新元素的 tabIndex 属性的值。
6.	scrollLeft 此属性用于访问和更新元素内容水平滚动的距离。
7.	scrollTop 它用于访问和更新元素内容垂直滚动的距离。
8.	scrollWidth 此属性以像素为单位提供元素内容的总水平宽度。
9.	scrollHeight 您可以使用此属性以像素为单位获取元素内容的总垂直高度。
10.	id id 属性用于设置和检索元素的 id 属性的值。
11.	innerText 它允许我们检索或更改网页上 HTML 元素内的可见文本内容。
12.	isContentEditable 它用于检查网页元素是否可以直接由用户编辑。
13.	lang lang 属性是 HTML 元素的属性，用于指定语言代码。
14.	lastChild lastChild 属性返回一个指向特定父元素的最后一个子节点的节点。
15.	lastElementChild 它返回一个包含父元素的最后一个子元素的节点。
16.	namespaceURI 元素的 namespaceURI 属性提供分配给元素的命名空间 URI。
17.	nextElementSibling 使用此属性，您可以获取特定元素序列中的下一个节点。
18.	nextSibling 它用于访问 DOM 树中当前节点的下一个节点。
19.	nodeName 此属性用于根据节点内容识别节点的类型和名称。
20.	nodeType nodeType 属性返回一个整数，表示节点的类型。
21.	nodeValue 它用于访问和更新节点的值。
22.	offsetHeight 此属性用于获取网页上该元素的完整可见高度，包括其垂直填充和边框，以像素为单位。
23.	offsetLeft 它返回元素的左边界与其最近的定位父元素的左边界之间的距离（以像素为单位）。
24.	offsetParent 它用于查找影响另一个元素定位的最接近的祖先元素。
25.	offsetWidth 元素的 offsetWidth 属性提供网页上该元素的总可见宽度。
26.	outerHTML outerHTML 属性获取元素的整个 HTML 代码。
27.	outerText 此属性可以访问或更新 HTML 元素的文本内容，包括其所有嵌套文本和元素。
28.	ownerDocument 它为您提供包含特定元素的文档节点的对象。
29.	parentElement 它允许您访问 HTML 元素内特定元素的直接父元素。
30.	parentNode 此属性用于访问 HTML 元素内特定节点的直接父节点。
31.	classList 它充当一个活动容器，其中包含分配给元素的 class 属性的 CSS 类集合。
32.	childNodes 它用于检索元素的所有子节点，包括元素、文本节点和注释。
33.	className 您可以使用此属性访问或修改元素的 class 属性的值。
34.	clientTop 它用于在网页布局中获取准确的元素定位和大小计算。
35.	firstElementChild 它提供给定父元素内的第一个子元素。
36.	offsetTop 使用此属性，您可以获取元素的顶部边缘与其最近的定位祖先的顶部边缘之间的垂直距离（以像素为单位）。
37.	attributes 它返回包含 HTML 元素属性集合的“NameNodeMap”。
38.	accesskey 此属性允许您为网页上的元素分配键盘快捷键。
39.	firstChild 它帮助您访问 HTML DOM 中给定父元素的第一个子节点。
40.	innerHTML 此属性允许我们读取元素的现有 HTML 内容并使用新的 HTML 内容更新它。
41.	dir 它提供访问权限，用于设置和检索 HTML 中任何元素的 dir 属性的值。
42.	contentEditable 您可以使用此属性使 HTML 元素内的文本内容可编辑。
43.	clientWidth 它返回元素的宽度，包括内边距，但不包括外边距、边框或滚动条宽度。
44.	clientLeft 此属性用于获取元素左侧边框的宽度，不包括左侧内边距或外边距。
45.	clientHeight 它用于获取元素的内部高度，包括内边距，但不包括外边距、边框或滚动条宽度。
46.	children 此属性返回子元素的集合。
47.	childElementCount 它返回指定元素的直接子元素的数量。

打印页面