JS------DOM-CSDN博客

本文链接：https://blog.csdn.net/beichenxiansen/article/details/107202102

本文深入讲解了JavaScript中DOM（文档对象模型）的操作方法，包括如何获取、创建、删除和添加节点，以及如何设置行内样式、类名和checkbox的状态。通过实例演示了使用getElementById、getElementsByClassName、getElementsByTagName和getElementsByName等方法获取页面节点的过程。

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

JS—DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.c3{
				font-size:50px;
				color:green;
				
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div>
				<h1 class= "c1">
					helloWorld
				</h1>
				<h1>hellobaby!</h1>
			</div>
			
		</div>
		<div class ="c2">hello1</div>
		<div class ="c2">hello2</div>
		<div class ="c2">hello3</div>
		<div class ="c2">hello4</div>
		<div>
			<input type="checkbox"  id="ch"/>全选
		</div>
		<div>
			<input type="checkbox" name ="item" checked=true/>
		</div>
		<div>
			<input type="checkbox" name ="item" />
		</div>
		<div>
			<input type="checkbox" name ="item" />
		</div>
		<div>
			<input type="checkbox" name ="item" />
		</div>
		<div>
			<input type="checkbox" name ="item" />
		</div>
	</body>
	<script type="text/javascript">
		//DOM: docuement  object model 
		//节点：元素节点  文本节点  属性节点   注释节点   文档节点
		//获取节点，创建节点， 删除节点，添加节点
		//获取节点：
		//通过ID获取节点:document.getElementById()
		//通过类名获取document.getElementsByClassName()
		//通过标签名获取 document.getElementsByTagName()
		//通过name获取  document.getElementsByName()
		
		
		//设置行间样式  obj.style.属性=属性值
		//添加类名 obj.className = "类名"
		//设置checkbox的checked 的值   obj.checked =true |false
		var div1 = document.getElementById("div1");//通过ID获取节点
		console.log(div1);//测试
		console.log(typeof div1);
		
		
		//2通过class获取页面节点
		var divs = document.getElementsByClassName("c2");
		console.log(divs);//测试
		
		for(var i =0;i<divs.length;i++)
		{
			//设置节点的行内样式  obj.style.属性="属性值"
			divs[i].style.backgroundColor = "yellow";
			divs[i].style.color="red";
			divs[i].style.height = "30px";
			divs[i].style.width="500px";
			divs[i].style.marginTop = "20px";
		}
		
		//3通过标签名获取页面节点  obj.className ="类名"
		var h1s = document.getElementsByTagName("h1");
		console.log(h1s);
		for(var i =0;i<h1s.length;i++)
		{
			h1s[i].className = "c3";
		}
		
		//先获取第1个全选的checkbox
		//var ch= document.getElementsByTagName("input")[0];
		var ch = document.getElementById("ch");
		//4通过name属性获取后面所有的商品的checkbox
		var items = document.getElementsByName("item");
		console.log(items);
		//点击事件
		ch.onclick = function()
		{
			console.log(ch.checked);//测试  true ,false
			//循环，对name = item  的checkbox,设置checked 
			for(var i =0;i<items.length;i++)
			{
				items[i].checked = ch.checked;
			}
		}
	</script>
</html>
l