DOM（一）：基础、操作元素内容、操作元素属性、定时器、轮播图
1、基础认知
1）作用和分类
2）DOM
3）DOM树
4）DOM对象
<body><div>abc</div> //html标签<script>const div = document.querySelector('div')//打印对象console.dir(div) //dom对象</script>
</body>2、获取DOM对象
1）根据CSS选择器来获取DOM元素（重点）
（1）选择匹配的第一个元素---querySelector
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 150px;}</style>
</head><body><div class="box">abcd</div><div class="box">1234</div><p id="nav">ABCD</p><ul><li>1</li><li>2</li><li>3</li></ul><script>// querySelector获取匹配的第一个元素const div = document.querySelector('div')console.log(div)const box = document.querySelector('.box')console.log(box)const nav = document.querySelector('#nav')console.log(nav)const li = document.querySelector('ul li:first-child')console.log(li)</script>
</body></html>
（2）选择匹配的多个元素---querySelectorAll
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>// querySelectorAll选择所有的小liconst lis = document.querySelectorAll('ul li')console.log(lis)</script>
</body>
2）其他获取DOM元素方法（了解）
3、操作元素内容
目标：能够修改元素的文本更换内容
1）对象.innerText属性
<body><div class="box">文字内容</div><script>// 获取元素const box = document.querySelector('.box')// 修改文字内容 对象.innerText属性console.log(box.innerText);box.innerText = '<strong>我是一个盒子<strong>'</script>
</body>2）对象.innerHTML属性
<body><div class="box">文字内容</div><script>// 获取元素const box = document.querySelector('.box')// 修改文字内容 对象.innerHTML属性console.log(box.innerHTML);box.innerHTML = '<strong>ABCD<strong>'</script>
</body>3）案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 840px;height: 420px;background: url(/images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}</style>
</head><body><div class="box"><strong>传智教育年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>const personArr = ['周杰伦', '刘德华', '周星驰', '郭富城', '张学友', '黎明']const random1 = Math.floor(Math.random() * personArr.length)const one = document.querySelector('#one')one.innerHTML = personArr[random1]personArr.splice(random1, 1)const random2 = Math.floor(Math.random() * personArr.length)const two = document.querySelector('#two')two.innerHTML = personArr[random2]personArr.splice(random2, 1)const random3 = Math.floor(Math.random() * personArr.length)const three = document.querySelector('#three')three.innerHTML = personArr[random3]personArr.splice(random3, 1)console.log(personArr)</script>
</body></html>4、操作元素属性
1）常用属性
2）样式属性
（1）通过style属性操作CSS
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: skyblue;}</style>
</head><body><div class="box"></div><script>const box = document.querySelector('.box')box.style.width = '500px' //一定要带单位// 多组单词采用小驼峰命名法box.style.backgroundColor = 'blue'</script>
</body></html>（2）通过类名属性操作CSS
（3）通过classList属性操作CSS
toggle有这个类名就删除这个类名，没有就追加
<!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>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// const arr = [1, 3]// arr[0]// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]// 1. 需要一个随机数 const random = parseInt(Math.random() * sliderData.length)// console.log(sliderData[random])// 2. 把对应的数据渲染到标签里面// 2.1 获取图片const img = document.querySelector('.slider-wrapper img')// 2.2. 修改图片路径 = 对象.urlimg.src = sliderData[random].url// 3. 把p里面的文字内容更换// 3.1 获取pconst p = document.querySelector('.slider-footer p')// 3.2修改pp.innerHTML = sliderData[random].title// 4. 修改背景颜色const footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].color// 5. 小圆点const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)// 让当前这个小li 添加 active这个类li.classList.add('active')</script>
</body></html>3）表单元素属性
<body><input type="checkbox" name="" id=""><button>点</button><script>const ipt = document.querySelector('input')// checked只接收Boolean值console.log(ipt.checked); //false// 字符串中，只有空字符串为false// ipt.checked = true //勾选// ipt.checked = 'true' //勾选，不提倡 有隐式转换const btn = document.querySelector('button')// console.log(btn.disabled); //默认false 不禁用btn.disabled = true //禁用</script>
</body>4）自定义属性
<body><div data-id="1">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.log(one.dataset.id);</script>
</body>
5、定时器---间歇函数
<body><script>// setInterval(函数, 间隔时间)setInterval(function () {console.log('一秒执行一次');}, 1000)</script>
</body>
<body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(10)</button><script>const btn = document.querySelector('.btn')let i = 10let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n)btn.disabled = falsebtn.innerHTML = `同意用户协议`}}, 1000)</script>
</body>6、案例：轮播图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="/images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>const sliderData = [{ url: '/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: '/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: '/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: '/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: '/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: '/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: '/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: '/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')let i = 0 //信号量// console.log(sliderData[i])setInterval(function () {// console.log(sliderData[i])i++if (i >= sliderData.length) i = 0// 更换图片路径img.src = sliderData[i].url// 更换文字内容p.innerHTML = sliderData[i].title// 小圆点 1.先删除之前的active 2.只让当前li添加activedocument.querySelector(`.slider-indicator .active`).classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)</script>
</body></html>