福州网站建设外包网站规划
文章目录
- 1、获取DOM对象
- 1.1 根据CSS选择器来获取DOM元素
- 1.2 其他获取DOM元素方法
- 2、操作修改元素的内容
- 3、练习：年会抽奖
- 4、操作修改元素的属性
- 4.1 操作元素常用属性
- 4.2 操作元素样式属性
- 4.2.1 通过style属性操作CSS
- 4.2.2 通过类名className操作CSS
- 4.2.3 通过classList操作CSS
- 4.3 操作表单元素属性
- 4.4 自定义属性
1、获取DOM对象
1.1 根据CSS选择器来获取DOM元素
跟 CSS选择器类似，选中标签后才能操作，同样的，查找DOM对象，就是利用JS选中页面的标签元素：
1）选择匹配的第一个元素
- 语法：
-
传参：包含一个或多个有效的CSS选择器的
字符串 -
返回：CSS选择器匹配的第一个元素，
是一个 HTMLElement对象，且这个DOM对象可以直接操作修改，没匹配到，则返回null -
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
-
练习：
<body><div class="box">123</div><div class="box">asd</div><p id="nav">导航栏</p><ul><li>第一个</li><li>第二个</li><li>第三个</li></ul><script>// 使用标签选择器获取const div = document.querySelector('div')// 使用类选择器获取const box = document.querySelector('.box')console.dir(div)console.dir(box)// 使用ID选择器获取const nav = document.querySelector('#nav')console.dir(nav)// 获取ul的第一个liconst li = document.querySelector('ul li:first-child')console.log(li)</script>
</body>
2）选择匹配多个元素
- 语法：
- 传参：包含一个或多个有效的CSS选择器的 字符串
- 返回：匹配到的对象集合
NodeList - 练习：
<body><ul><li>第一个</li><li>第二个</li><li>第三个</li></ul><script>// 获取ul的所有liconst lis = document.querySelectorAll('ul li')console.log(lis)</script>
</body>
注意，NodeList是一个伪数组，有长度有索引号，但是没有 pop() push() 等数组方法，因此，只能通过for遍历来获取和修改获取到的DOM对象
<body><ul><li>第一个</li><li>第二个</li><li>第三个</li></ul><script>const lis = document.querySelectorAll('ul li')console.log(lis)for (let i = 0; i < lis.length; i++) {console.log(lis[i])}</script>
1.2 其他获取DOM元素方法
比较早的一种写法，后两个方法得到的也是一个伪数组
2、操作修改元素的内容
- 对象.
innerText属性 ：只识别文本，不能解析标签 - 对象.
innerHTML属性：能识别文本，能够解析标签
不能解析标签，即如果你更新的文本里带有html标签，操作innerText属性，文本里的html标签会原样输出，不做解析，因此，纠结到底用谁，都可以选择innerHTML
<body><div class="box">这是文字内容</div><script>// 获取元素const box = document.querySelector('.box')// 修改文字内容console.log(box.innerText)box.innerText = '这是修改后的内容'box.innerHTML = '<strong>修改后的内容带标签</strong>'</script>
</body>
3、练习：年会抽奖
需求：从数组随机抽取一等奖、二等奖和三等奖
实现思路：
- 先写静态html，中奖员工名字占位留着
- 写JS，生成随机数，从数组中找到对应的员工
- 通过innerHTML属性修改元素内容
<!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>.wrapper {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="wrapper"><strong>年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>const personArr = ['员工1', '员工2', '员工3', '员工4', '员工5', '员工6']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)</script>
</body></html>
4、操作修改元素的属性
4.1 操作元素常用属性
通过JS 设置或修改标签的属性，比如通过src更换图片
- 语法：
- 示例：
// 获取元素
const pic = document.querySelector('img')
// 修改元素属性
pic.src = './images/new.jpg'
pic.title = '新的标题'
- 练习：当我们刷新页面，页面中的图片随机显示不同的图片
<body><img src="./images/desktop_1.jpg" alt=""><script>const img = document.querySelector('img')const random = Math.floor(Math.random() * 10 + 1)img.src = `./images/desktop_${random}.jpg`img.title = '风景'</script>
</body>
4.2 操作元素样式属性
通过JS 设置或修改标签的样式属性，比如实现轮播图小圆点自动更换颜色样式
4.2.1 通过style属性操作CSS
- 语法：
- 示例：
- 练习：刷新页面，页面中的背景图片随机显示不同的图片
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background: url(./images/desktop_1.jpg) no-repeat top center/cover;}</style>
</head><body><script>let random = Math.floor(Math.random() * 10 + 1)// css页面背景图片 background-image//标签选择body//因为body是唯一的标签，可以直接写 document.body.styledocument.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`</script></body>
4.2.2 通过类名className操作CSS
修改多个样式时，使用style属性得一个个修改，繁琐，可使用css类名的方式：
- 语法：这里用className，而不是像类选择器一样用class属性名，是因为class是JS关键字，所以用className这个属性名
- 示例：
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.old {color: red;}/* 新定义一个CSS选择器 *//* 快速生成，敲：w300+h300+bgc */.new {width: 300px;height: 300px;background-color: greenyellow;}</style>
</head><body><div class="old">123</div><script>// 获取元素const div = document.querySelector('.old')// 修改样式div.className = 'new'</script></body>- 注意：直接使用 className 赋值会覆盖以前的类名，如上面old的样式会被覆盖掉，不再保留，要想都保留，可以在修改时把类名都加上
4.2.3 通过classList操作CSS
为了解决className 容易覆盖以前的类名，使用classList来做追加和删除CSS选择器类名，不影响以前的类名
- 语法： toggle，切换，即有这个样式就删掉，没有就加上
- 示例：上面className同时保留两个样式，用classList来实现：
<body><div class="old">123</div><script>const div = document.querySelector('.old')div.classList.add('new')// 有就删掉，没有就加上//div.classList.toggle('new')</script></body>
- 练习：刷新页面，页面中的轮播图会显示不同图片以及样式
// 先写静态html和CSS，页面主要由三个两个div盒子，外面套一个div盒子组成
// 再JS操作DOM对象，修改HTML
<!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>// 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)' },]const random = Math.floor(Math.random() * sliderData.length)// 获取DOMconst img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const div = document.querySelector('.slider-footer')const data = sliderData[random]// 修改DOMimg.src = data.urlp.innerHTML = data.titlediv.style.backgroundColor = data.color// random是0-7，而无序列表下的li是1-8，所以加1const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)// 添加一个active样式，让小圆点选中li.classList.add('active')</script>
</body></html>
效果：
4.3 操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
- 语法：
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
- 示例：
<body><input type="text" value="电脑"><script>// 获取元素const uname = document.querySelector('input')// 获取表单元素的值，不用innerHTML，只能用valueconsole.log(uname.value) //电脑// 设置表单的值uname.value = '笔记本'// 修改文本框为密码框uname.type = 'password'</script>
</body>
- 表单中，选中和不选中☑️，相关属性如disabled、checked、selected，设置true表示添加了该属性，设置为false表示取消选中
<body><input type="checkbox"><button>按钮</button><script>// 获取元素const ipt = document.querySelector('input')// 给复选框打对勾✅ipt.checked = trueconst button = document.querySelector('button')// 置灰按钮button.disabled = true </script>
</body>
效果：
4.4 自定义属性
除了标签语法中自带的属性，还可以自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取，
.dataset可以获取到这个DOM的所有自定义属性的集合
示例：
<body><!-- 自定义属性data-id --><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>