JavaScript--DOM(document object model:文档对象模型）

最新推荐文章于 2024-04-09 17:00:00 发布

lkfmiaomiao

最新推荐文章于 2024-04-09 17:00:00 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/lkfmiaomiao/article/details/100728597

版权

JavaScript–DOM(document object model:文档对象模型）

**DOM 树 **

获取元素
获取元素的方法：

通过id名获取

document.getElementById();

var nav=document.getElementById('nav');
			console.log(nav);
			//打印出来的id是null，因为代码是从上往下执行的，所以是先执行前面的代码的，
			// 解决方法：把script标签放在body内容之下

通过类名来获取元素

document.getElementsByClassName();

*通过标签获取元素 *

document.getElementsByTagName();

var lis=document.getElementsByTagName('li');
			console.log(lis);
			console.log(lis[0]);
			//因为有多个li，所以打印出来的是一个数组，我们可以通过数组下标的形式要获取对应的标签

通过节点关系获取

    console.log(nav.childNodes);

	console.log(nav.children);

console.log(nav.parentNode);

console.log(nav.firstChild);

console.log(nav.firstElementChild.nextElementSibling);
//第一个元素的孩子的下一个元素节点

console.log(nav.lastElementChild);
//nav的第一个孩子节点是文本（换行)text

事件类型

onclick（点击事件）
onmouseover（鼠标滑过）
onmouseout（鼠标滑出)
onmousemove

绑定事件
三要素：
绑定元素、事件类型、事件处理函数

第一步获取元素（给谁绑）

var btn=docuemnt.getElementById('btn');

事件类型
onclick-点击鼠标操作
onmouseover（鼠标滑过）
onmouseout（鼠标滑出)
事件处理函数

  btn.onclick=function(){
            				alert('鼠标点击时');
            				btn.style.background='red'; 			}

btn.onmouseover=function(){
				this.style.background='pink';
			}

btn.onmouseout=function(){
	alert('鼠标滑出时');
		}

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		li{
			list-style:none;
		}
		#nav{
			width:1000px;
			height:50px;
			border-top: 1px solid gray;
			border-bottom: 1px solid gray;
			border-color: rgba(255,0,0,0.2);
			margin:0 auto;
			
		}
		#nav li{
			width:80px;
			height:50px;
			margin-left:50px;
			line-height:50px;
			font-size:20px;
			float:left;
			text-align:center;
		}
		.box{
			width:1000px;
			height:500px;
			margin:0 auto;
			border:2px solid red;
			
		}
		.box div{
			display:none;
		}
		
	</style>
	<body>
	<ul id="nav">
		<li>我的关注</li>
		<li>推荐</li>
		<li>导航</li>
	</ul>
	<div class="box">
		<div>我的关注的内容</div>
		<div style="display:block;">推荐的内容</div>
		<div>导航的内容</div>
	</div>
	</body>
	<script>

//先要获取要操作的元素
		var lis=document.getElementById('nav').children;
		var divs=document.getElementsByClassName('box')[0].children;
		for(var i=0;i<lis.length;i++){
//给节点元素添加一个属性，赋值为下标
			lis[i].index = i;
			//分别给每个li绑定点击事件
		lis[i].onclick=function(){
			for(var i=0;i<lis.length;i++){
			//隐藏3个div
				divs[i].style.display='none';
				
			}
			//对应的div显示
			this.style.color='white';
			this.style.background='gray';
			divs[this.index].style.display="block";
				
		}
	}
		
	for(var i=0;i<lis.length;i++){
		lis[i].onmousemove=function(){
			this.style.color='white';
			this.style.background='pink';
		}
	}
	for(var i=0;i<lis.length;i++){
		lis[i].onmouseout=function(){
			this.style.color='black';
			this.style.background='white';
		}
	}
	//获取元素
	

	</script>
</html>

效果展示：
在这里插入图片描述
鼠标滑过：

鼠标点击：

lkfmiaomiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--DOM(document object model:文档对象模型）

JavaScript–DOM(document object model:文档对象模型）**DOM 树 **获取元素获取元素的方法：通过id名获取document.getElementById();var nav=document.getElementById('nav'); console.log(nav); //打印出来的id是null，因为代码是从上往下执行的...
复制链接

扫一扫