JS 基础 04：DOM基础

1.DOM基础

1.获取DOM元素

document.querySelector()    //获取单个元素
document.querySelectorAll() //获取相同的一组元素

形参为"abc" -> 绑定第一个 <abc></abc> 这一对标签
形参为".abc"-> 绑定第一个class="abc"的标签
形参为"#abc"-> 绑定第一个id="abc"的标签

2.用className更换标签的 class 属性

<style>
	.active{
		background-color: orangered;
	}
</style>

<h1 class="abc"> HELLO </h1>
<h1 class="abc"> HELLO </h1>
<h1 class="abc"> HELLO </h1>
<h1 class="abc"> HELLO </h1>
<h1 class="abc"> HELLO </h1>

<script>
//更换标签的 class 使用className属性
//获取所有<h1>
let h1List = document.querySelectorAll("h1")
for (let i in h1List){
	h1List[i].onclick = function(){
		if(h1List[i].className === "active"){
			h1List[i].className = "abc"
		}else{
			h1List[i].className = "active"	
		}		
	}
}	
</script>

2.案例 实现轮播图

<style type="text/css">
			.swiper{
				width: 40rem;
				height: 20rem;
				overflow: hidden;	/* 容器内多余的部分隐藏 */
				position: relative;
			}
			.img-container{
				width: 120rem;
				height: 20rem;
				display: flex;
				transition: 0.5s;	/* 设置过度动画 */
			}
			.img-container img{
				width: 40rem;
				height: 20rem;
			}
			/* .img-container:hover{
				transform: translate(-40rem); 鼠标悬浮时,内容左移40rem 
			} */
			.number-list{
				position: absolute;
				bottom: 0;
			}
</style>

		<!-- 实现一个轮播图.
		3张图片用flex属性连在一起,长度是容器的 3 倍.
		为按钮绑定事件,每点一次,左移一张图片的宽度
		 另外,使用CSS3 属性transition = 0.5s 设置过渡动画	-->
		<div class="swiper">
			<div class="img-container">
				<img class="img" src="img/1.jpg" />
				<img class="img" src="img/2.png" />
				<img class="img" src="img/3.png" />
			</div>
			<div class="number-list">
				<button>1</button>
				<button>2</button>
				<button>3</button>
			</div>
		</div>

	let btns = document.querySelectorAll(".number-list button")
	let container = document.querySelector(".img-container")
			
	for(let i in btns){
		btns[i].onclick = function(){
			container.style.transform = `translate(${-40*i}rem)`
		}
	}