DOM操作

最新推荐文章于 2022-06-04 15:27:31 发布

原创最新推荐文章于 2022-06-04 15:27:31 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM操作 #JS获取页面元素的方法

本文深入讲解了DOM（文档对象模型）的基本概念与操作方法，包括访问和修改HTML文档的多种方式，如getElementById、getElementsByTagName等，以及节点的创建、添加、删除和替换。同时，介绍了属性节点和内容的操作，如getAttribute、setAttribute等，并详细解释了常用DOM属性的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM操作

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。“

W3C DOM 标准被分为 3 个不同的部分：

(1)核心 DOM - 针对任何结构化文档的标准模型

(2)XML DOM - 针对 XML 文档的标准模型

(3)HTML DOM - 针对 HTML 文档的标准模型注：DOM 是 Document Object Model（文档对象模型）的缩写

JavaScript 中 DOM 节点操作

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
在这里插入图片描述

HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点
在这里插入图片描述

JavaScript 的 DOM 方法

HTML DOM 操作元素

访问 HTML 元素（节点）常用的访问 HTML 元素的方法：

(1) getElementById()方法

getElementById() 方法返回带有指定 ID 的元素。语法：document.getElementById(“id 值”) ；

(2) getElementsByTagName()方法

getElementsByTagName() 返回带有指定标签名的所有元素。语法：元素.getElementsByTagName(“标签名称”);

(3) getElementsByClassName()方法

getElementsByClassName() 返回带有指定 class 的元素。语法：元素.getElementsByTagName(“class 值”);

(4) getElementsByName()方法

getElementsByName() 返回带有指定 name 的元素。语法：元素.getElementsByTagName(“name 值”)；

对于元素节点的操作

(1) appendChild()方法

功能：把新的子节点添加到指定节点

(2) removeChild()方法

功能：删除子节点

(3) replaceChild()方法

功能：替换子节点。

(4) insertBefore()方法

功能：在指定的子节点前面插入新的子节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素节点的操作</title>
		<script type="text/javascript">
			window.onload=function(){
				var div1=document.getElementById('div1');
				var p1=document.getElementById('p1');
				//(1),appendChild()		把新的子节点添加到指定节点中
//				div1.appendChild(p1);
				//(2),removeChild()		删除子节点
				var span1=document.getElementById('span1');
//				div1.removeChild(span1);
				//(3),raplaceChild()	替换子节点
				var span2=document.getElementById('span2');
				var p2=document.getElementById('p2');
//				div1.replaceChild(p2,span2);
				//(4),insertBefore()	在指定的子节点前插入新的子节点
				var span3=document.getElementById('span3');
//				div1.insertBefore(span3,span1);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span id="span1"></span>
			<span id="span2"></span>
		</div>
		<p id="p1"></p>
		<p id="p2"></p>
		<span id="span3"></span>
	</body>
</html>

对于节点属性及内容的操作

（1） createElement()方法

功能：创建元素

（2） createTextNode()方法

功能：创建文本节点

（3） createAttribute()方法

功能：创建属性节点

（4） getAttribute()方法

功能：返回指定的属性值

（5） setAttribute()方法

功能：把指定属性设置或修改为指定的值

（6）setAttributeNode()方法

功能：将属性节点添加到指定的节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节点属性和内容的操作</title>
		<script type="text/javascript">
			window.onload=function(){
			//(1),createElement()	创建元素节点
				var body=document.getElementsByTagName('body')[0];
				//创建了一个p标签
				var p1=document.createElement('p');
				//把新的子节点添加到指定节点中	(将p添加到body中)
				body.appendChild(p1);
				var p2=document.createElement('p');
				body.appendChild(p2);
			//(2),createTextNode()		创建文本节点
				var txt1=document.createTextNode('创建了一个文本节点');
				//把新的子节点添加到指定节点中	(将txt1添加到p1中)
				p1.appendChild(txt1);
			//(3),createAttribute()		创建属性节点
				var clas=document.createAttribute('class');
				var id=document.createAttribute('id');
				clas.value='p1';
				id.value='p1';
			//setAttributeNode():将属性节点添加到指定的节点
				p1.setAttributeNode(clas);
				p1.setAttributeNode(id);
			//(4),getAttribute()			获取属性节点值
				alert(p1.getAttribute('class'));
			//(5),setAttribute()			把指定的属性值或修改为指定的值
				p1.setAttribute('id','p_01');
			}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

常用的 HTML DOM 属性

(1) innerHTML 属性

功能：设置或返回表格行的开始和结束标签之间的 HTML

(2) parentNode 属性

功能：以 Node 对象的形式返回指定节点的父节点;如果指定节点没有父节点，则返回 null。

(3) childNodes 属性

功能：返回节点的子节点集合，以 NodeList 对象

(4) attributes 属性

功能：返回指定节点的属性集合，即 NamedNodeMap

(5) nodeName 属性

功能： nodeName 属性指定节点的节点名称。

(6) nodeValue 属性

功能：设置或返回指定节点的节点值

(7)nodeType 属性

功能：节点元素的类型
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用的HTML DOM操作</title>
		<script type="text/javascript">
			window.onload=function(){
			//(1),innerHTML
				var div1=document.getElementById('div1');
				div1.innerHTML='<p>innerHTML</p>';
			//(2),parentNode	节点元素的父节点
				var div2=document.getElementById('div2');
				var spans=document.getElementsByTagName('span')[0];
				var h1=document.getElementsByTagName('h1')[0];
//				alert(spans.parentNode);		//显示结果为：[object HTMLDivElement]
//				alert(h1.parentNode);			//显示结果为：[object HTMLBodyElement]
			//(3),childNades	节点元素的子节点
//				alert(div2.childNodes);			//显示结果为：[object NodeList]		返回节点的子节点集合
			//(4),attributes	节点元素的属性节点
//				alert(div1.attributes);			//显示结果为：[object NamedNodeMap]
				//获取节点元素属性节点的长度
				var length=div1.attributes.length;
//				alert(length);					//显示结果为：2
			//(5),nodeName		节点元素的值
				//获取span标签的父节点元素的值
//				alert(spans.parentNode.nodeName);		//获取结果为：DIV
				//获取h1标签的父节点元素的值
//				alert(h1.parentNode.nodeName);			//获取结果为：BODY
			//(6),nodeValue		节点元素的值
				var btn=document.getElementById('btn');
				btn.addEventListener('click',myClick);
				function myClick(){
					h1.innerHTML=btn.childNodes[0].nodeValue;
				}
			//(7),nodeType		节点元素的类型
			/*nodeType 属性返回以数字值返回指定节点的节点类型。
			如果节点是元素节点，则 nodeType 属性将返回 1。
			如果节点是属性节点，则 nodeType 属性将返回 2。*/
				alert(spans.nodeType);		//返回：1	元素节点
			//创建一个属性节点	createAttribute()
				var clas=document.createAttribute('class');
				clas.value='div2';
			//setAttributeNode():将属性节点添加到指定的节点
			//如果这个指定的属性已存在，则此方法会替换它。
				div1.setAttributeNode(clas);
				alert(clas.nodeType);		//返回：2	属性节点
			}
		</script>
	</head>
	<body>
		<div id="div1" class="div1"></div>
		<div id="div2">
			<span></span>
		</div>
		<h1>按一下获取节点元素的值</h1>
		<button id="btn">按一下试试</button>
	</body>
</html>