Javascript 简明教程

JavaScript - DOM Elements

The DOM Elements

HTML DOM elements 是文档对象模型元素的首字母缩写。借助 JavaScript，我们可以操作 HTM 元素。我们可以通过 id、属性、标记名称、类名称等访问 HTML 元素。

当网页在浏览器中加载时，它会创建一个 DOM tree 来代表网页的结构。网页包含各个 HTML elements ，您可以通过 JavaScript 中的属性和方法来操作它们。此处我们讨论如何访问、修改、替换等 DOM 元素。

Accessing DOM elements

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

Get HTML Element using its "id"

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

按照以下语法使用 getElemenetById() 方法来访问 HTML 元素，方法是使用它的 id。

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.

Get an HTML element using the "name"

HTML 可以有一个“name”属性。您可以使用 getElementByName() 方法来访问 HTML 元素，方法是使用“name”属性的值。

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

document.getElementsByName('name')

在此处，您需要用元素的 name 属性的值替换“name”。

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

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

Get HTML element using the "className"

HTML 的 class 属性包含字符串值。一个 HTML 元素也可以有多个类。您可以使用 getElementByClassName() 方法来访问 HTML 元素，方法是使用多个类名中的任意单个类名。

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

document.getElementsByClassName('className');

在以上语法中，用元素“class”属性的值替换“className”。

在下面的代码中，我们使用类名称访问 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

Get an HTML element using the "tag" name

每个 HTML 元素都使用 HTML 标签定义。可以使用该标签的 getElementByTagName() 方法来使用标签名称访问 HTML 元素。

使用 getElementByTagName() 方法时，请遵循以下语法。

document.getElementsByTagName('tag');

在上面的语法中，使用“p”、“a”、“img”等替换 HTML 标签中的“tag”。

在下面的代码中，我们使用 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.

Modifying the DOM Elements

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

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

Modify the Content of the DOM Element

可以使用元素的“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>

Replace the Child Element

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

Adding Events to the DOM Elements

可以使用 addEventListner() 方法向 DOM 元素添加事件以与 HTML 元素交互。

Syntax

使用 addEventListner() 方法时，请遵循以下语法。

element.addEventListener(eventName, callback);

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

Example

我们在下面的代码中为 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>

List of DOM Element Properties

下表包含您可以在 JavaScript 中与 HTML 元素结合使用的属性。

Property

Description

accessKey

用于访问或设置 HTML 元素的 accessKey 属性。

attributes

以 NamedNodeMap 格式返回元素的所有属性。

childElementCount

返回特定 HTML 元素的全部子元素的数量。

childNodes

用于获取特定 HTML 元素的子节点的 NodeList。

children

用于获取 HTML 元素的子节点的 HTML 集合。

classList

返回包含 HTML 元素类名的数组。

className

获取或设置类属性的值。

clientHeight

获取 HTML 元素的高度。（包括填充）

clientLeft

获取左边的边框宽度。

clientTop

获取右边的边框宽度。

clientWidth

获取 HTML 元素的宽度。（包括填充）

contentEditable

设置布尔值，表示 HTML 元素的内容是否可编辑。

dir

设置或获取文本的方向，从左到右 (ltr) 或从右到左 (rtl)。

firstChild

获取元素的第一个子节点。

firstElementChild

获取特定 HTML 元素的第一个子元素。

获取或设置 'id' 属性的值。

innerHTML

获取或更新元素的 HTML。

innerText

设置或获取 HTML 元素及其子元素的文本内容。

isContentEditable

它根据内容是否可编辑返回布尔值。

isDefaultNamespace()

它根据名称空间 URI 返回布尔值，名称空间 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

设置或获取元素的标题。

List of DOM Element Methods

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

Method

Description

addEventListener()

将事件处理程序添加到 HTML 元素。

appendChild()

在 HTML 元素的最后一个节点添加一个新子元素。

blur()

从 HTML 元素中移除焦点。

click()

单击元素。

cloneNode()

To clone an element.

closest()

根据 CSS 选择器在 DOM 树中找到最接近的元素。

compareDocumentPosition()

对比两个 HTML 元素的文档位置。

contains()

检查 HTML 节点是否包含特定节点。

focus()

将焦点放在 HTML 元素上。

getAttribute()

获取 HTML 元素的特定属性值。

getAttributeNode()

获取属性节点。

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()

为了设置或更新属性节点。