DOM是一套标准编程接口,通过这套接口来操作html元素
网页效果:操作元素节点、属性节点、文本节点,以及修改元素的样式
获取节点
DOM通过document对象,为开发者提供了大量接口(api)来操作DOM树。
document.getEementByld(); 通过id来获取元素
<h1 id = "title">111111</h1>
let h1 = document.getElementById("title");
// 返回值是一个dom节点
document.getEementByClassName();通过class名字来获取元素(多个)
<button class="btn">1</button>
<button class="btn">2</button>
let btns = document.getElementsByClassName("btn");
// 返回值是一个dom节点的集合
document.querySelector();获取一个节点
let h1 = document.querySelector("#title")
// 通过选择器来选择节点 由于是通过id属性来选择所以写作#id
document.querySelectorAll();获取多个节点(集合)
let btns = document.querySelectorAll("btn");
//如果需要修改集合的属性 还是需要遍历循环
domObject.innerHTML:获取元素内的所有内容
可以通过dom的innerHTML属性设置节点内的值
let h1 = document.getElementById("title");
h1.innerHTML = "你好 世界"
如果是class的属性节点,由于是集合的原因 需要使用for...in循环遍历来修改数值
let btns = document.getElementsByClassName("btn");
for(let i in btns){
btns[i].innerHTML = "test"
}
事件类型 当……时候,做……事儿
- click:点击事件 如果需要绑定事件则在前面加个on 例btn.onclick =
事件监听函数:当这个事件被触发时候,这个函数则被执行
<button>打招呼</button>
let btn = document.querySelector("button");
btn.onclick = function(){
console.log("你好啊")}
// 事件监听函数 当鼠标点击按钮控制台输出你好的内容 绑定事件需要在click前面添加on
- mouseenter:鼠标移入元素 如果需要绑定事件则在前面加on
- mousemove :鼠标在元素内移动
- mouseleave:鼠标移出元素 如果需要绑定事件则在前面加on
let box = document.querySelector(".box");
box.onmouseenter = function(){
console.log("hello")
};
box.onmouseleave = function(){
console.log("你好")
}
// 移入输出hello 移出输出你好
设置样式
element.style.color 修改样式颜色
element.style.backgroundColor 修改样式背景色
let btn = document.querySelector("button");
let box = document.querySelector(".box");
box.onmouseenter = function(){
this.style.backgroundColor = "blue";
};
box.onmouseleave = function(){
this.style.backgroundColor = "red";
}
btn.onclick = function(){
box.style.backgroundColor = "green"
}
//移入蓝色 移出红色 点击按钮绿色 在事件监听里修改样式需要把样式直接写在监听函数里
设置属性
element.src 切换图片效果
需要先获取图片和按钮的节点,然后定义图片路径的数组,使用for in循环按钮,设置监听属性,在监听函数里使用图片的.src循环数组。
<div>
<img src="images/1.jpg" alt="">
</div>
let img = document.querySelector("img");
let imgList = ["images/1.jpg","images/2.jpg","images/3.jpg"]
let btns = document.querySelectorAll("button")
for (let i in btns){
btns[i].onclick = function(){
img.src = imgList[i];
}
}
element.id 修改id
通过class属性设置样式
element.className
可以通过定位的到节点.className = "xxxx"修改class的名称
点击原始、设置激活的背景色 注意 click跟mouseenter、mouseleave 不能同时使用
<h1 class="title">hello world</h1>
let h1 = document.querySelector("h1");
h1.onclick = function(){
h1.className = "rarara"
}
// 选中和取消选中
let h1List = document.querySelectorAll("h1");
for (let i in h1List){
h1List[i].onclick = function(){
if(this.className === "rerere"){
this.className = ""
}else{
this.className = "rerere"
}
}
}
// 有class则设为空 无则添加class值
实现轮播效果 (css3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM基础作业</title>
<style>
.swiper{
height: 320px;
width: 640px;
overflow: hidden;
position: relative;
}
.images-container{
height: 320px;
width: 1920px;
display: flex;
transition: transform 0.8s;
}
.images-container img{
height: 320px;
width: 640px;
}
/* .images-container:hover{
transform:translate(-640px) ;
} */
.number-list{
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="swiper">
<div class="images-container">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<div class="number-list">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<script>
let btnList = document.querySelectorAll(".number-list button")
let container = document.querySelector(".images-container")
for(let i in btnList){
btnList[i].onclick = function(){
// 0*640 = 0;
// 1*640 = 640;
// 2*640 = 1280;
container.style.transform = `translate(${-640 * i}px)`;
}
}
</script>
</body>
</html>