DOM的12中节点类型，通过关系或方法获取DOM节点，渲染到浏览器页面的一些特效功能，获取DOM节点来改变属性，点击图片，切换为所点击的图片为背景图，页面上的表单验证，点击底部导航栏切换界面

最新推荐文章于 2024-11-16 14:11:26 发布

初夏半微凉

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量368

点赞数 2

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/chuxialia/article/details/125789118

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文详细介绍了DOM的概念及其在HTML页面中的应用，包括获取和操作DOM节点、节点关系、属性修改等。通过示例展示了如何使用JavaScript改变元素样式，如点击表格列变色、偶数行变色、行点击变色以及图片点击切换背景图。同时，还涉及了表单验证和页面导航栏点击切换内容的实现。这些实例深入浅出地揭示了DOM在网页动态交互中的核心作用。

摘要由CSDN通过智能技术生成

什么是DOM

DOM是一种文档对象模型，同时也是用于html编程的接口，通过dom来操作页面中的元素
当html页面被实现加载的时候，浏览器会创建一个dom，给文档提供了一种新的逻辑结构，并且可以改变内容和结构
DOM是面向对象，并且定义了修改文档所需要的对象，各个对象之前的关系，我们可以也页面上的dom看成一个树状结构（文档树），通过js，对html文档进行添加排版，js要想访问html中的元素，就要通过对象模型来获得

DOM的12中节点类型

元素节点　　Node.ELEMENT_NODE(1)
属性节点　　Node.ATTRIBUTE_NODE(2)
文本节点　　Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)5.
实体引用名称节点　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点　　Node.ENTITY_NODE(6)
处理指令节点　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点　 Node.COMMENT_NODE(8)
文档节点　 Node.DOCUMENT_NODE(9)
文档类型节点　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)

通过方法获取DOM节点

// 获取某一个具体的节点
var div1 = document.getElementById("box1");
// 如果没有就返回null
console.log(div1);
div1.title = "66666";

// 获取节点容器，就是装的所有的节点
var arr = document.getElementsByClassName("box2");
console.log(arr);

// 根据标签名返回类数组，如果没有就返回啥来着？？？null
var inps = doucment.getElementByTagName("box2");
console.log(inps)

// 就是标签的属性name
var arr = doucment.getElementByName("idcard");
console.log(arr)

// 当节点有多个的时候只会获取第一个box2  没有就返回null
var el = doucment.querySelector(".box2");
console.log("el");

// 获取全部的box2
var el = doucment.querySelectorAll(".box2");
console.log("el");

// 总结：H5的技术很好用，但是getElementById的速度是最快的
// 通过同级节点找也很方便

通过关系获取DOM节点

<body>
	<div id="box1">hello
	<div class="box2" id="box4">2</div>
	<div class="box2">
		<div class="box3" id="box5">box3</div>
	</div>
	<div class="box2" id="box6">4</div>
	</div>
	<script>
		var box4 = doucment.querySelector("#box4");
		var box4baba = box4.perentElement;
		console.log(box4baba);
		var box5 = document.querySelector("#box5");
		// 父节点
		console.log(box5.parentElement.parentElenmet.parentElement);
		// 一直往上找 就找到了document
		console.log(box5.parentNode.parentNode.parentNode.parentNode.parentNode);
		
		// 子节点  打了回车就说明后面可以写文字，就是文本节点
		var box4 = document.querySelector("#box1");
		var arr = box4.children // 子元素们
		var arr2 = box4.childNodes // 子节点们
		console.log(arr, arr2);
		
		// 没有也会返回一个空数组
		var box = document.querySelector("#box4");
		console.log(box.children, 111);
				
		var box = document.querySelector("#box4");
		// 兄弟节点  弟弟元素
		console.log(box.nextElementSibling);
		
		// 弟弟节点，有一个空文本节点
		console.log(box.nextSibling);
		
		// 没有弟弟就返回空null
		var box = document.querySelector("#box6");
		console.log(box.nextElementSibling);
		console.log(box.nextSibling);
				
		// 哥哥节点
		var box = document.querySelector("#box4");
		// 兄弟节点  哥哥元素
		console.log(box.previousElementSibling);
		
		// 哥哥节点，有一个空文本节点
		console.log(box.previousSibling);
		
		// 没有哥哥就返回空null
		var box = document.querySelector("#box6");
		console.log(box.previousElementSibling);
		console.log(box.previousSibling);
				
		// 第一个子元素 空格的地方就是文本节点
		var box = document.querySelector("#box6");
		console.log(box.firstElementChild) // 第一个子元素
		console.log(box.firstChild) // 第一个子节点
		
		// 最后一个子元素
		var box = document.querySelector("#box6");
		box.children[box.children.length - 1];
		box.childNode[box.chilNodes.length - 1];
		console.log(box.lastElementChild) // 最后一个子元素
		console.log(box.lastChild) // 最后一个子节点
				
		// 获取这个元素是同胞中的第几个元素
		Object.protitype.indexof1 = function() {
			var arr = this.parentElement.children
			for (let i = 0; i < arr.length; i++) {
				if (arr[i] === this) {
					return i;
				}
			}
		}
		var box = document.querySelector("#box4");
		var box = document.querySelector("#box6");
		console.log(box.indexof1());
	</script>
</body>

获取DOM节点来改变属性

点击表格列被点击的列变色

// 设置表格样式
<style>
	table{
		border: 1px red solid;
	}
	tr{
		width: 100%;
		height: 40px;
	}
	td{
		width: 100px;
		border: 1px darkred solid;00.
	}
</style>
// 写一个四行四列的表格		
<table id="tb" cellspacing="0">
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
</table>
<script>
	// 在原型链上添加一个方法，
	Object.prototype.indexof1=function(){
		// 得到所有的td（列）
		var arr=this.parentElement.children
		// 遍历arr里的td列
		for(let i=0;i<arr.length;i++){
			// 这里的this就是一个td列
			// 如果arr中的td等于this，那么就是点击的这一列
			if(arr[i]===this){
				return i
			}
		}				 
	}
</script>
<script>
	// 通过方法获取他们的DOM节点
	var tb=document.querySelector("#tb")
	var trs=document.querySelectorAll("tr")
	var tds=document.querySelectorAll("td")
	for(let i=0;i<tds.length;i++){
		tds[i].onclick=function(){
			//1.把所有的td的背景颜色设置为白色
			//2.获取当前点击的元素是一横排中的第x个元素
			//3.把没一横排的第x个元素 设置为red
			//利用排它思想来做，简便快捷
			tds.forEach((el)=>{
				el.style.backgroundColor="white"
			})
			let x=tds[i].indexof1()
			trs.forEach((el)=>{
				//el是tr元素
				el.children[x].style.backgroundColor="red"
			})
		}
	}
</script>

偶数行变色

<style>
	table{
		border: 1px red solid;
	}
	tr{
		width: 100%;
		height: 40px;
	}
	td{
		width: 100px;
		border: 1px darkred solid;00.
	}
</style>		
<table id="tb2" cellspacing="0">
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
</table>
<script>
	(function(){
		var trs=document.querySelectorAll("#tb2 tr")
		for(var i=0;i<trs.length;i++){
			console.log(i,trs[i])
			if(i%2){
				trs[i].style.backgroundColor="gray"
			}
		}
		
	})()
	
</script>

点击表格行被点击的行变色

<style>
	table{
		border: 1px red solid;
	}
	tr{
		width: 100%;
		height: 40px;
	}
	td{
		width: 100px;
		border: 1px darkred solid;00.
	}
</style>	
<table id="tb3" cellspacing="0">
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
	<tr>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
		<td>hello</td>
	</tr>
</table>
<script>
	(()=>{
		var trs=document.querySelectorAll("#tb3 tr")
		for(let i=0;i<trs.length;i++){					
			trs[i].onclick=function(){
				trs.forEach((el)=>{
					el.style.backgroundColor="white"
				})							
				trs[i].style.backgroundColor="gray"
			}			
		}
	})()
</script>

点击图片，切换为所点击的图片为背景图

<div id="div1">
	<img id="img" width="200px" height="130px" src="1.jpg" />
	<img id="img" width="200px" height="130px" src="2.jpg" />
	<img id="img" width="200px" height="130px" src="1.jpg" />
</div>
<script>
	var imgs = document.querySelectorAll("img");
	var srcarr=["1.jpg","2.jpg","1.jpg"]
	for(let i=0;i<imgs.length;i++){
		imgs[i].onclick = function (){
			document.body.style.backgroundImage = `url('${srcarr[i]}')`;
		} 
	}
</script>

页面上的表单验证

<style>
	#p1{
		/* display: none; */
		/* visibility: visible; */
		visibility: hidden;
		color: red;
	}
</style>
<div>
	email <input type="text" id="email" /> <br />
	<p id="p1">/* 邮箱格式错误 */</p>
	pwd <input type="password" id="pwd"/> <br />
	<button  id="btn">登录</button>
</div>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	// 不可以先在这里获取，一定要在点击事件后，不然一直都只有是空字符串，没有任何东西
	btn.onclick = function(){		
		// 获取输入框里面的value值
		var email = document.querySelector("#email")
		var emailv=email.value
		var pwd = document.querySelector("#pwd").value
		var emailreg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		if(emailreg.test(emailv)){
			email.style.border = "1px green solid";
			document.querySelector("#p1").style.visibility="hidden"
		} else {
			// console.log("err")
			email.style.border="1px red solid"
			document.querySelector("#p1").style.visibility="visible"
		}
	}
</script>

点击底部导航栏切换界面

<style>
.content{
	width: 350px;
	height: 500px;
	background-color: red;
}
.view{
	width: 350px;
	height: 400px;
	background-color: bule;
}
.tabbar{
	width: 350px;
	height: 100px;
	background-color: red;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.btn{
	width: 25%;
	background-color: gainsboro;
	cursor: pointer;
}
.btn:first-child{
		background-color: skyblue;
}
.viewconent{
	width: 350px;
	height: 400px;
	background-color: bule;
	display: none;
}
.viewconent:first-child{
	display: block;
}
</style>
<div class="content">
<div class="view">
               <div class="viewconent">home</div>
               <div class="viewconent">car</div>
               <div class="viewconent">my</div>
               <div class="viewconent">set</div>
</div>
<div class="tabbar">
	<div class="btn">
		<span>home</span>					
	</div>
	<div class="btn">car</div>
	<div class="btn">my</div>
	<div class="btn">set</div>
</div>
</div>

<script>
var tabbarbtns=document.querySelectorAll(".tabbar .btn")
tabbarbtns.forEach((el,index)=>{
	// console.log(el)
	el.onclick=function(){
		tabbarbtns.forEach((el2)=>{el2.style.backgroundColor="gainsboro"})
		el.style.backgroundColor="skyblue"
		//1.获取点击了第x个按钮index/el.indexof1()
		//2.把内容区域的所有的隐藏 把内容区域的第x个显示
		var viewconents=document.querySelectorAll(".viewconent")
		viewconents.forEach((el3)=>{el3.style.display="none"})
		viewconents[index].style.display="block"
	}
})