JavaScript - DOM 元素

DOM 元素

HTML DOM 元素是 Document Object Model（文档对象模型） 元素的首字母缩写词。使用 JavaScript，我们可以操作 HTM 元素。我们可以使用 id、属性、tag 名、class 名等来访问 HTML 元素。

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

访问 DOM 元素

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

使用其 “id” 获取 HTML 元素

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

语法


 document.getElementById('id')

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

下面使用 id 访问 div 元素，并使用 'innerHTML' 属性更改其内部 HTML。


<html>
<body>
	 <div id = "output"> </div>
	 <script>
	 	 document.getElementById('output').innerHTML = "使用id访问该元素。";
	 </script>
</body>
</html>

输出

使用id访问该元素。

使用 “name” 获取 HTML 元素

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

语法


 document.getElementsByName('name')

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

下面使用 name 访问 div 元素。返回 name 作为参数传递的节点数组。


<html>
<body>
	<div name = "text"> Hello World! </div>
	<div id = "output">div元素的内容是：</div>
	<script>
	 	const divEle = document.getElementsByName('text');
	 	document.getElementById("output").innerHTML += divEle[0].innerHTML;
	</script>
</body>
</html>

输出

Hello World!
div元素的内容是： Hello World!

使用 “className” 获取 HTML 元素

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

语法


 document.getElementsByClassName('className');

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

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


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

输出

苹果
水果的名字是: 苹果

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

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

语法


 document.getElementsByTagName('tag');

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

下面使用 getElementTagName() 方法访问 <p> 元素，返回 <p> 元素的节点列表。


<html>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<div id = "output"> </div>
<script>
	const numbers = document.getElementsByTagName('p');
	document.getElementById("output").innerHTML =	
	"第一个“p”元素是: " + numbers[0].innerHTML + "<br>" +	
	"第二个“p”元素是: " + numbers[1].innerHTML;
</script>
</body>
</html>

输出

这是第一段。

这是第二段。

第一个“p”元素是: 这是第一段。
第二个“p”元素是: 这是第二段。

修改 DOM 元素

JavaScript 允许修改和替换 HTML DOM 元素，下面是修改 DOM 元素的内容和替换子元素示例。

修改 DOM 元素内容

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

语法


 element.textContent = newText;

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

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


<html>
<body>
	<button onclick = "updateText()"> 更新文本 </button>
	<p id = "text"> Hello World! </p>
	<script>
	 	 function updateText() {
	 	 	 document.getElementById("text").textContent = "这是updaetd文本！";
	 	 }
	</script>
</body>
</html>

替换子元素

JavaScript 利用 replaceChild() 方法替换特定 HTML 元素的子元素。

语法


 textDiv.replaceChild(newNode,replacableNode);

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

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


<html>
<body>
	 <button onclick = "replaceText()"> 替换子元素 </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 元素进行交互。

语法


 element.addEventListener(eventName, callback);

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

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


<html>
<body>
	<div id = "text" style = "background-color: red;color:white">
	 	 <p> 一些文本 </p>
	 	 <p> 一些别的文本 </p>
	</div>
	<div id = "output"> </div>
	<script>
	 	 let text = document.getElementById("text");
	 	 text.addEventListener("click", function () {
	 	 	 	document.getElementById("output").innerHTML = "你点击了div元素";
	 	 });
	</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 元素方法列表

JavaScript 操作 HTML 元素的方法：

方法	描述
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()	设置或更新属性节点。

<< JavaScript - DOM 文档 JavaScript - DOM 表单 >>