JavaScript DOM 元素

HTML DOM 元素是文档对象模型元素的简称。使用 JavaScript，我们可以操纵 HTML 元素。我们可以通过 id、属性、标签名称、类名等访问 HTML 元素。

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

访问 DOM 元素

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

通过 “id” 获取 HTML 元素

在网页中，每个 HTML 元素可以有一个唯一的 id 值。你可以使用 getElementById() 方法通过 id 来访问 HTML 元素。

语法

按照下面的语法使用 getElementById() 方法通过 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 元素。它返回一个带有作为参数传递的名字的节点数组。

<html>
<body>
   <div name="text"> Hello World! </div>
   <div id="output">The content of the div element 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 element is: Hello World!

通过 “className” 获取 HTML 元素

HTML 的 class 属性包含字符串值。单个 HTML 元素也可以有多个类。你可以使用 getElementsByClassName() 方法通过任意一个类名来访问 HTML 元素。

语法

按照下面的语法使用 getElementsByClassName() 方法。

document.getElementsByClassName('className');

在上述语法中，将 'className' 替换为元素的 '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 标签定义的。你可以使用 getElementsByTagName() 方法通过标签名称来访问 HTML 元素。

语法

按照下面的语法使用 getElementsByTagName() 方法。

document.getElementsByTagName('tag');

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

示例

在下面的代码中，我们使用 getElementsByTagName() 方法访问 <p> 元素。

它返回 <p> 元素的 Node 列表。

<html>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</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 paragraph.

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

修改 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 updated text!";
      }
   </script>
</body>
</html>

替换子元素

在 JavaScript 中，你可以使用 replaceChild() 方法来替换某个 HTML 元素的子元素。

语法

按照下面的语法使用 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 元素上添加了点击事件。每当点击该 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 与默认相同，则返回布尔值。
lang	设置或获取 lang 属性的值。
lastChild	获取 HTML 元素的最后一个子节点。
lastElementChild	获取 HTML 元素的最后一个子元素。
namespaceURI	获取树的 namespaceURI。
nextSibling	获取 DOM 树同一级别的下一个节点。
nextElementSibling	获取 DOM 树同一级别的下一个 HTML 元素。
nodeName	获取节点的名称。
nodeType	获取节点的类型。
nodeValue	获取或设置节点的值。
offsetHeight	获取元素的高度，包括内边距、边框和滚动条。
offsetWidth	获取元素的宽度，包括内边距、边框和滚动条。
offsetLeft	获取 HTML 元素的水平偏移位置。
offsetParent	获取 HTML 元素的偏移容器。
offsetTop	获取 HTML 元素的垂直偏移位置。
outerHTML	设置或获取外层 HTML，包括开始和结束标签。
outerText	设置或获取 HTML 元素的外部文本。
ownerDocument	获取文档的根元素。
parentNode	获取 HTML 元素的父节点。
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 选择器查找最近的元素。
compareDocumentPosition()	比较两个 HTML 元素在文档中的位置。
contains()	检查 HTML 节点是否包含特定的节点。
focus()	使 HTML 元素获得焦点。
getAttribute()	获取 HTML 元素的特定属性的值。
getAttributeNode()	获取属性节点。
getBoundingClientRect()	获取元素相对于视口的大小和位置。
getElementById()	通过 id 访问 HTML 元素。
getElementByName()	使用名称访问 HTML 元素。
getElementsByClassName()	获取匹配类名的子 HTML 元素集合。
getElementsByTagName()	获取匹配标签名的子 HTML 元素集合。
hasAttribute()	检查 HTML 元素是否包含特定的属性。
hasAttributes()	检查 HTML 元素是否至少包含一个属性。
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()	设置或更新属性节点。