❮ ❯

JavaScript - DOM 元素

DOM 元素

HTML 中的 DOM 元素 是文档对象模型元素的缩写。使用 JavaScript，我们可以操作 HTML 元素。我们可以使用 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 元素也可以包含多个 class。您可以使用 getElementByClassName() 方法，通过多个 class 名称中的任意一个访问 HTML 元素。

语法

请按照以下语法使用 getElementByClassName() 方法。

document.getElementsByClassName('className');

在上述语法中，将"className"替换为元素的"class"属性值。

示例

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

<html>
<body>
   <div class = "fruit"> Apple </div>
   <div id = "output">这种水果的名字是: </div>
   <script>
      const divEle = document.getElementsByClassName('fruit');
      document.getElementById("output").innerHTML += divEle[0].innerHTML;
   </script>
</body>
</html>

输出

Apple
这种水果的名字是: 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"属性，以更新"元素"的内容。

示例

在输出中，当您点击按钮时，它将调用 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>