javascripts 五属性，节点，tab栏切换案例

最新推荐文章于 2024-04-13 21:40:18 发布

原创最新推荐文章于 2024-04-13 21:40:18 发布 · 450 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#servlet

这篇博客介绍了DOM操作的基本技巧，包括获取和设置元素属性，实现tab栏切换效果，以及节点的相关操作如获取父节点、子节点，创建、添加、删除和复制节点。此外，还展示了动态生成表格和下拉菜单的实例，强调了在实际网页交互中的应用。

一。获取自定义属性值

element.属性//获取元素内置属性值如：class名，id名等

element.getAttribute（‘属性’）//获取自定义属性值

二。设置属性值

element.属性=‘值’ //设置内置属性值

element.setAttribute（‘属性’，‘值’）//设置自定义属性值

三.移出属性

element.removeAttribute（‘属性’）

四.tab栏切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab栏切换</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.tab{
				height: 30px;
				width: 320px;
				margin: 10px auto;
			}
			li{
				height: 30px;
				width: 80px;
				text-align: center;
				list-style: none;
			}
			.tab_list ul{
				height: 30px;
				width: 320px;
				line-height: 30px;
				background-color: antiquewhite;
				display: flex;
			}
			.current{
				color: white;
				background-color: red;
			}
			.tab_con .item {
				display: none;
			}
		.tab_con .show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>价格</li>
					<li>保障</li>
					<li>评价</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item show">
					商品介绍模块内容
				</div>
				<div class="item">
					价格介绍模块内容
				</div>
				<div class="item">
					保障介绍模块内容
				</div>
				<div class="item">
					评价介绍模块内容
				</div>
			</div>
		</div>
		<script>
			var tab_list=document.querySelector('.tab_list');
			var lis=tab_list.querySelectorAll('li');
			var oItems=document.querySelector('.tab_con').querySelectorAll('.item')
			for(var i=0;i<lis.length;i++){
				lis[i].setAttribute('index',i)
				lis[i].onclick=function(){
					for(var i =0 ;i<lis.length;i++){
						lis[i].className='';
					}
					this.className='current';
					var index=this.getAttribute('index');
					for(var i=0;i<oItems.length;i++){
						oItems[i].className='item';
					}
					oItems[index].className='show';
				}
			}
		</script>
	</body>
</html>

五.节点

使用DOM获取元素逻辑性不强比较繁琐，所以采用父子兄弟关系的节点获取

document.parentNode//获取元素父节点

parentNode.childNodes//获取指定节点的子节点的集合，包含元素节点，文本节点等--不常用

parentNode.children//获取指定节点的子元素节点---常用（伪数组）

parentNode.firstChild//返回第一个子节点，找不到返回null，包含所有节点

parentNode.lastChild//最后一个子节点

firstElementChild返回第一个子元素节点---ie9版本支持

firstElementChild //返回最后一个子元素节点--ie9版本支持

解决方案：采用children[index]的办法

六。节点案例

1.下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉菜单（节点）</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: azure;
			}
			
			a{
				text-decoration: none;
				color: darkcyan;
				
			}
			li{
				list-style: none;
			}
			.nav_item{
				height: 120px;
				width: 200px;
				
				text-align: center;
				display: flex;
				margin: 0 80px;
				padding: 20px 40px;
			}
			.nav_item li ul{
				
				display: none;
				
			}
			.nav_item li ul li{
				height: 40px;
				width: 45px;
				line-height: 45px;
				text-align: center;
				border: 1px solid orangered;
			}
			.nav_item li{
				
				height: 20px;
				width: 48px;
			}
			.nav_item li a:hover,.nav_item li ul li:hover{
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul class="nav_item">
				<li>
					<a href="#">微博</a>
					<ul>
						<li class="l1">菜单1</li>
						<li>菜单2</li>
					</ul>
				</li>
				<li>
					<a href="#">qq</a>
					<ul>
						<li class="l1">菜单1</li>
						<li>菜单2</li>
					</ul>
				</li>
				<li>
					<a href="#">读书</a>
					<ul>
						<li class="l1">菜单1</li>
						<li>菜单2</li>
					</ul>
				</li>
				<li>
					<a href="#">相声</a>
					<ul>
						<li class="l1">菜单1</li>
						<li>菜单2</li>
					</ul>
				</li>
			</ul>
			
			
		</div>
		<script>
			var olis=document.querySelector('.nav_item');
			var lis=olis.children;
			for(var i =0 ; i<lis.length;i++){
				lis[i].onmouseover=function(){
					this.children[1].style.display='block';
				}
				lis[i].onmouseout=function(){
					this.children[1].style.display='none';
				}
			}
		</script>
	</body>
</html>

七。兄弟节点

nextSibling//下一个兄弟元素

previousSbiling//上一个兄弟节点

nextElementSbiling//下一个兄弟元素节点

previousElementSbiling//上一个兄弟元素节点

封装兄弟节点：

八。创建节点

createElement（‘tagname’）//创建节点

appendChild（child）//添加节点（末尾）

insertBefore（child，指定元素）//在前面添加

1.发布留言案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发布留言</title>
		<style>
			*{
				margin: 0;padding: 0;
			}
			.leaving_a_message{
				margin: 15px 10px;
			}
			ul li{
				height: 25px;
				width: 200px;
				background-color: antiquewhite;
			
			}
		</style>
	</head>
	<body>
		<div class="leaving_a_message">
			<div class="fabu">
				<textarea cols="30" rows="10"></textarea>
				<button>发布</button>
				<ul>
					
				</ul>
			</div>
		</div>
		<script>
			window.onload=function(){
				var text=document.querySelector('textarea');
				var btn=document.querySelector('button');
				var ul=document.querySelector('ul');
				btn.onclick=function(){
					if(text.value==''){
						alert("请输入内容")
					}else{
						var li=document.createElement('li');
						li.innerHTML=text.value;
						ul.insertBefore(li,ul.children[0]);
						
					}
					
					
				}
			}
		</script>
	</body>
</html>

九。删除节点

removeChild（child） //删除节点

1.删除留言案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发布留言</title>
		<style>
			*{
				margin: 0;padding: 0;
			}
			.leaving_a_message{
				margin: 15px 10px;
			}
			ul li{
				height: 25px;
				width: 200px;
				background-color: antiquewhite;
			
			}
			li a{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="leaving_a_message">
			<div class="fabu">
				<textarea cols="30" rows="10"></textarea>
				<button>发布</button>
				<ul>
					
				</ul>
			</div>
		</div>
		
	<script>
	window.onload=function(){
		var text=document.querySelector('textarea');
		var btn=document.querySelector('button');
		var ul=document.querySelector('ul');
		
		btn.onclick=function(){
			if(text.value==''){
				alert("请输入内容");
				return false;
			}else{
				var li=document.createElement('li');
				li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
				ul.insertBefore(li,ul.children[0]);
				var as=document.querySelectorAll('a');
				for(var i =0;i<as.length;i++){
					as[i].onclick=function(){
						ul.removeChild(this.parentNode);
					}
				}
			}
		}
		
	}
	</script>
	</body>
</html>

十。复制节点

closeNode()//复制节点(空false浅拷贝只复制标签，true深拷贝复制内容)

十一.动态生成表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
		<style>
			table{
				width: 240px;
			}
			tr{
				height: 35px;
				border-bottom: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<table border='1' cellspacing='0' align="center">
				<caption>信息</caption>
				<colgroup>
					<col span="4" style="background-color: aqua;">
				</colgroup>
				<thead>
					<tr>
						<th>姓名</th>
						<th>科目</th>
						<th>成绩</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
		<script>
			window.onload=function(){
				var student=[
					{
						name:'sdsf',
						sbuject:"javascript",
						score:'12',
					},
				{
					name:'sdsf',
					sbuject:"javascript",
					score:'12',
				},
				{
					name:'sdsf',
					sbuject:"javascript",
					score:'12',
				},
				{
					name:'sdsf',
					sbuject:"javascript",
					score:'12',
				},
				{
					name:'sdsf',
					sbuject:"javascript",
					score:'12',
				},
				];
				var oTbody=document.querySelector('tbody');
				for(var i=0; i<student.length; i++){
					
				var tr=document.createElement('tr');
					oTbody.appendChild(tr);
					
					for(var k in student[i]){
						var td=document.createElement('td');
						td.innerHTML=student[i][k];
						tr.appendChild(td);
					}
					var td=document.createElement('td');
					td.innerHTML='<a href="javascript:;">删除</a>'
					tr.appendChild(td);
					var del=document.querySelectorAll('a');
					for(var i=0;i<del.length;i++){
						del[i].onclick=function(){
							oTbody.removeChild(this.parentNode.parentNode);
						}
					}
				}
			}      
		</script>
	</body>
</html>