操作元素案例合集

案例1：

<div id="box">
			helo
		</div>
		<!-- <img src="" alt=""> -->
		<input type="text" id="email" value="">
		<div id="box2" contenteditable="true">123345</div>
		<img id="img1" src="src/18.jpg">
		<a id="a1" href="http://www.baidu.com">xxx</a>
		<button id="btn">change</button>
		<script>
			//id是box的元素 可以把box直接看做一个全局变量  它引用的就是#box元素
			//知道就行了 不要在项目这样使用 因为容易导致程序混乱
			btn.onclick = function fn() {
				// console.log(box)
				// box.innerHTML="<h1>6666</h1>"
				//操作元素的属性:你知道就可以操作多少
				box.innerText = "<h1>6666</h1>"
				email.value = "6666"
				// box2.value="8888" 
				//元素添加了可编辑属性以后 虽然有输入功能 但是依然用inner设置内容
				box2.innerText = "6666"
				// box2.
				img1.src = "./src/25.jpg"
				a1.href = "http://www.baidu.com"
				a1.style.textDecoration = "none"
			}
			// fn()
		</script>

 获取到我们的button按钮标签，给button按钮绑定点击事件，在点击事件函数里面去修改各个标签里面的属性值，代码中直接通过id值去修改的各个属性值，可行但不推荐使用，我们推荐使用的还是通过选择器去获取到标签，再去修改这个值，这里是为了方便代码的编写。

案例2：百度换肤

<style>
			body{
				background-image: url(./src/7.jpg);
				background-size: 100% 800px;
			}
			img{
				width: 120px;
				height: 60px;
			}
		</style>
		<img src="./src/7.jpg">
		<img src="./src/8.jpg">
		<img src="./src/9.jpg">
		
		<script>
			var imgs=document.getElementsByTagName("img")
			var srcarr=["./src/7.jpg","./src/8.jpg","./src/9.jpg"]
			for(let i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){
					document.body.style.backgroundImage=`url("${srcarr[i]}")`
				}
			}
			
		</script>

百度换肤的原理就是绑定点击事件，通过点击事件去改变背景图片的地址

这里涉及到一个新知识点 ：

${.......} 这里面表示的保存的一个变量而不是字符串，因为写在字符串里面，所以当引擎认识这是个变量而不是字符串。

案例3：表单验证

<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>
			var btn=document.getElementById("btn")
			var email=document.querySelector("#email").value
			var pwd=document.querySelector("#pwd").value
			btn.onclick=function(){
				var email=document.querySelector("#email")
				var emailv=email.value
				var pwd=document.querySelector("#pwd").value
			    console.log(email)
				console.log(pwd)
				var emailreg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if(emailreg.test(emailv)){
					// console.log("正确")
					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>

就是给按钮绑定点击事件，之后点击函数里面去分别获取两个input框里面值，然后设置邮箱的正则表达式去做test（）判定，如果test（）返回为真则输出，如果为假则输出。

案例4：tab切换效果

<style>
			.content{
				width: 350px;
				height: 500px;
				background-color: goldenrod;
			}
			.view{
				width: 350px;
				height: 400px;
				background-color: palegreen;
			}
			.tabbar{
				width: 350px;
				height: 100px;
				background-color: goldenrod;
				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: palegreen;
				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"
					var viewconents=document.querySelectorAll(".viewconent")
					viewconents.forEach((el3)=>{el3.style.display="none"})
					viewconents[index].style.display="block"
				}
			})
			
		</script>

思想其实是类似的，为了点击什么就出现什么，唯一的难点就在于怎么在上面显示下面点击的什么，这段代码其实利用了取巧的办法，首先在上面写一排内容相同的内容，不过进行隐藏起来，低当点击下面的点击事件时，通过我们之前设计的函数去获取这个点击事件是父元素的第几个子元素，获取到了i的值之后，在上面通过i的值找到对应的板块然后显示。

案例5：下拉菜单

		<div class="dropbtn">
			btn
		</div>
		<div class="dropmenu">
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
		</div>

window.onload=function(){
				var dropbtn=document.querySelector(".dropbtn")
				var flag=true;
				var timer=null;
				var dropmenu=document.querySelector(".dropmenu")
				var result;
				dropbtn.addEventListener("click",function(e){
					//万一多次点击按钮 先清除上一次的计时器
					clearInterval(timer)
					if(flag=!flag){
						result=0
					}else{
						result=400						
					}
					timer=setInterval(()=>{						
						let h=window.getComputedStyle(dropmenu).height
						dropmenu.style.height=parseInt(h)+(result-parseInt(h))*0.7+"px"
					},20)										
				})				
			}

我们来理解一下这个代码，给这个div绑定了一个点击事件，点击事件里面传入了一个函数然后调用，最难以理解的是什么？就是这个if判断，把flag变量取反然后重新赋值给flag，做判断，然后给result赋值，0则表示消除了这个下拉框，为什么呢？

这个涉及到了缓动动画

设定值=当前+(差量)*百分比   差量就是目标值减去当前值

result就代表了里面的值，把height设置为了0

否则反之