DOM—节点操作

最新推荐文章于 2024-10-04 00:46:18 发布

水沉草木

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量110

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_69761234/article/details/126316840

版权

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>2级标题标签</h2>
		<p>段落标签</p>
		<ul>
			<li>无序列表第1项</li>
			<li id="test">无序列表第2项</li>
			<li>无序列表第3项</li>
			<li>无序列表第4项</li>
		</ul>
	</body>
	<script>
		//获取id属性值为test的标签元素
		// var liEle = document.getElementById("test");
		// console.log(liEle);

		var liEle=document.getElementById("test");
		console.log(liEle);

		//获取父节点
		var ulEle=liEle.parentNode;
		console.log(ulEle);
		
		//获取子节点(子节点中包含元素之间的空格换行)
		var ulElement=document.querySelector("ul");
		var liEles=ulElement.childNodes;
		console.log(liEles);

		//第一个/最后一个节点
		console.log(ulElement.firstChild);
		console.log(ulElement.lastChild);


		//上一个/下一个节点
		console.log(liEle.previousSibling);
		console.log(liEle.nextSibling);

	</script>
</html>

Element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h2>2级标题标签</h2>
		<p>段落标签</p>
		<ul>
			<li>无序列表第1项</li>
			<li id="test">无序列表第2项</li>
			<li>无序列表第3项</li>
			<li>无序列表第4项</li>
		</ul>
	</body>
	<script>

		//第一个/最后一个元素（选择时不会包含空格换行）
		var ulEle = document.querySelector("ul");
		console.log(ulEle.firstElementChild);
		console.log(ulEle.lastElementChild);
		//上一个/下一个元素
		var liEle = document.querySelector("#test");
		console.log(liEle.previousElementSibling);
		console.log(liEle.nextElementSibling)
		
		//节点信息
		console.log(ulEle.nodeName)
		console.log(ulEle.nodeType)
		console.log(document.nodeType)
	</script>
</html>

节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点属性

设置属性：

setAttribute()方法添加指定的属性，并为其赋指定的值

获取属性：

getAttribute() 方法返回指定属性名的属性值

删除属性：

removeAttribute() 方法删除指定的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作节点属性</title>
	</head>
	<body>
		<img src="st.png" title="帅哥"  width="500px"/><br />
		<button onclick="get()">获取图片路径</button>
		<button onclick="changeImg()">修改图片</button>
		<button onclick="deleteTitle()">删除图片属性</button>
	</body>
	<script>
		//获取img标签
		var imgEle = document.querySelector("img");
		console.log(imgEle.src);
		
		function get(){
			var imgSrc=imgEle.getAttribute("src");
			console.log(imgSrc);
		}
		
		function changeImg(){
			imgEle.setAttribute("src","ch.png");
		}
		
		function deleteTitle(){
			imgEle.removeAttribute("title");
		}
		
	</script>
</html>

创建&插入

名称	描述
document.createElement(“元素名”)	创建元素节点
document.createTextNode(“文本”)	创建文本节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul></ul>
	</body>
	<script>
		// 创建li元素
		var liEle=document.createElement("li");
		console.log(liEle);

		//创建文本节点
		var textNode=document.createTextNode("无序列表第一项");
		console.log(textNode);
		liEle .appendChild(textNode);
			
		//创建了li并且li中添加了内容，接下来将闯将li元素添加到ul
		var ulEle = document.querySelector("ul");
		ulEle.appendChild(liEle);
		console.log(ulEle);		
	</script>
</html>

删除&替换

名称	描述
父节点.removeChild( 子节点)	删除指定的节点
父节点.replaceChild( newNode, oldNode)	用其他的节点替换指定的节点

style属性

语法： HTML元素.style.样式属性＝"值"

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

className属性

语法：HTML元素.className="样式名称"

function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }