DOM操作与节点查找技巧-优快云博客

本文深入探讨了HTML文档对象模型(DOM)的基本概念，包括节点元素、属性和集合的操作，以及如何通过ID、标签名、class和名称查找元素。通过实例展示了如何使用JavaScript进行DOM操作，如修改样式和获取节点信息。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{width: 150px;}
	</style>
	<script type="text/javascript">
		/*
			回顾：
				1.节点 元素 
				2.节点属性   childNodes  parnetNode children  previousSibling  nextSibling
				3.节点集合    childNodes[索引]
				4.节点属性操作
					节点属性赋值：
						对象.属性名=值		例如：o.src='1.jpg'
						对象[属性名]=值
						对象.setAttribute(属性名,属性值)

					节点属性取值:
						对象.属性名
						对象[属性名]
						对象.getAttribute(属性名)
				5.样式的操作
					样式的修改
						对象.style.样式名=值;
					样式的获取
						对象.style.样式名
						window.getComputedStyle(对象,null)
						offset-名称			只读
				6.节点的查找
					(1)根据ID查找元素						返回值
						document.getElementById     		节点对象或者null
					(2)根据标签名查找节点
						document.getElementsByTagName       HTMLCollection 			在全局中查找
						obj.getElementsByTagName  			HTMLCollection  		在指定节点中查找
					(3)根据class查找元素
						document.getElementsByClassName(cls)  HTMLCollection
					(4)根据名称查找节点对象
						document.getElementsByName 			NodeList

		*/
	</script>
</head>
<body>
	<img src="images/1.jpg" alt="" id="pic">
	<input type="text" id="ipt">
	<div>你好</div>
	<div>下雪了</div>
	<div>不下了</div>
	<div>AAA
		<div>aaaa</div>
		<div>aaaa</div>
		<div>aaaa</div>
	</div>
	<div>AAA</div>
	<div>AAA</div>
	<button id="btn">取值</button>
	<button id="btn1">改变</button>
	<script type="text/javascript">
		/*//查找元素
		var oImg=document.getElementById('pic');
		var oIpt=document.getElementById('ipt');
		document.getElementById('btn').onclick=function () {
				oIpt.value=oImg.getAttribute('src');
				oImg.style.border='1px solid gray';
				oImg.style.padding='2px';
		};*/

		var ds=document.getElementsByTagName('div');
		console.log(ds);
		// console.log(ds[0]);
		document.getElementById('btn1').onclick=function () {
			// ds[0].style.color='red';
			// ds[1].style.color='blue';
			// ds[2].style.color='green';
			// ds.style.color='red';

			//error
			// for(var i in ds){
			// 	ds[i].style.color='red';
			// }

			//error
			// ds.forEach(function(item){
			// 	console.log(item);
			// });

			//遍历节点
			// for(var i=0;i<ds.length;i++){
			// 	// console.log(ds[i]);
			// 	// ds[i].style.color='red';
			// 	// ds[4].style.color='blue';

			// }


			var dds=ds[3].getElementsByTagName('div');
			// console.log(dds);
			// dds[0].style.color='green';
			for(var i=0;i<dds.length;i++){
				dds[i].style.color='pink';
			}
		};
	</script>
</body>
</html>