12 DOM对象及其操作
12.1 获取DOM对象
- 获取页面中的 DOM元素 就是利用 JS 选择页面中的标签元素；
- 文档：document.querySelector() - Web API | MDN (mozilla.org)。
12.1.1 根据CSS选择器来获取
-
选择匹配的第一个元素
-
语法：
document.querySelector('CSS选择器')； -
参数：包含一个或多个有效的CSS选择器（字符串，要加单引号）；
-
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。若没有匹配到，则返回null；
-
例：
document.querySelecor('div') document.querySelecor('.box') document.querySelecor('#nav') document.querySelecor('ul li:first-shild')
-
-
选择匹配的多个元素
-
语法：
document.querySelectorAll('css选择器')； -
参数：包含一个或多个有效的CSS选择器（字符串，要加单引号）；
-
返回值：CSS选择器匹配的NodeList（对象集合）；
-
例：
document.querySelecor('ul li') -
注意：这种方式得到的返回值是一个伪数组；
- 有长度、有索引号的数组；
- 但是没有
pop()、push()等数组操作方法； - 想要得到里面的每一个对象，则需要遍历（for）的方式获得。
-
12.1.2 其他获取DOM元素的方法
// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素。获取页面所有的div
document.getElementsByTagName('div')
//根据类名获取元素。获取页面所有类名为w的元素
document.getElementsByClassName('w')
12.2 操作对象内容
12.2.1 元素.innerText属性
-
将文本内容添加或更新到任意标签位置；
-
仅能识别文本，不解析标签；
-
例：
const info = document.querySelector('.info') //获取标签内部的文字 console.log(info.innerText) //添加或修改标签内部的文字内容 info.innerText = '哈喽，我是吴彦祖~'
12.2.2 元素.innerHTML属性
-
将文本内容添加或更新到任意标签位置；
-
不仅能识别文本，会解析标签。多标签时建议使用模板字符串；
-
例：
const info = document.querySelector('.info') //获取标签内部的文字 console.log(info.innerHTML) //添加或修改标签内部的文字内容 info.innerHTML = '哈喽，我是<strong>吴彦祖</strong>~'
牛马验纯仪式案例
<!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 name = ['哈哈哈', '嘿嘿嘿', '呜呜呜', '哦哦哦', '嗯嗯嗯', '林培基略略略
const random1 = Math.floor(Math.random() * name.length)
console.log(name[random1])
const one = document.querySelector('#one')
one.innerHTML = name[random1]
name.splice(random1, 1)
const random2 = Math.floor(Math.random() * name.length)
console.log(name[random2])
const two = document.querySelector('#two')
two.innerHTML = name[random2]
name.splice(random2, 1)
const random3 = Math.floor(Math.random() * name.length)
console.log(name[random3])
const three = document.querySelector('#three')
three.innerHTML = name[random3]
name.splice(random3, 1)
</script>
</body>
</html>
12.3 操作对象属性
12.3.1 操作元素常用属性
-
可以通过 JS 修改标签元素的属性，比如通过修改
src属性来更换图片； -
比较常见的属性有：
href、title、src等； -
语法：
对象.属性 = 值 -
例：
//获取元素 const pic = document.querySelector('img') //操作元素 pic.src = './images/b02.jpg' pic.title = '刘德华演唱会'
12.3.2 操作元素样式属性
12.3.2.1 通过style属性
-
语法：
对象.style.样式属性 = 值 -
例：
const box = document.querySelector('.box') //修改元素样式 box.style.width = '200px' box.style.marginTop = '15px' box.style.backgroundColor = 'pink' -
注意：
- 修改样式通过
style属性引出； - 如果属性名有
-连接符，需要转换为小驼峰命名法； - 在一些必要的赋值条件下，不要忘记加CSS单位。
- 修改样式通过
12.3.2.2 通过类名
-
如果修改或添加的样式比较多，直接通过style属性修改比较繁琐，可以借助类名；
-
语法：
//active是一个css类名 元素.className = 'active' -
例：
<style> .box { width: 300px; height: 300px; background-color: skyblue; margin: 100px auto; padding: 10px; border: 1px solid #000; } </style> <body> <div></div> <script> const div = document.querySelector('div') div.className = 'box' </script> </body> -
注意：
-
.后面是className，而不是class，因为class是一个关键字，代码中无法使用。浏览器渲染时会将className转换成class； -
若元素原本没有类名的时候，是给元素添加类名；若元素原本是有类名的，则新添加的类名会覆盖掉原来的类名；
-
若想要不是覆盖掉原本的类名，则改变一下写法即可，如：
//div原本就有一个nav的类名 div.className = 'nav box'
-
12.3.2.3 通过classList
-
为了解决className容易覆盖以前的类名的问题，可以通过 classList 方式追加和删除类名；
-
语法：
//追加一个类 元素.classList.add('类名') //删除一个类 元素.classList.remove('类名') //切换（有则删除，无则添加）一个类 元素.classList.toggle('类名')
12.3.3 操作表单元素属性
-
获取表单对象的值：
表单对象名.value -
获取表单对象的类型：
表单对象名.value = 新值 -
修改表单对象的值：
表单对象名.type -
修改表单对象的类型：
表单对象名.type = 新值 -
例：
<body> <input type="text" value="电脑"> <script> const uname = document.querySelector('input') console.log(uname.value) console.log(uname.innerHTML) uname.value = '我要买电脑' uname.type = 'password' </script> </body> -
设置选项框是否被勾选：
<body> <input type="checkbox" name="" id=""> <script> const ipt = document.querySelector('input') console.log(ipt.checked) // 默认为false，不勾选 ipt.checked = true // 只接受布尔值。勾选 ipt.checked = 'true' // 这种方式也可以把字符串选中，因为非空字符串也是true，会有隐式转换，但是不提倡这种写法 </script> </body> -
设置按钮是否可以被点击：
<body> <!-- 完整写法是disabled = disabled，但当属性名与属性值相同时，属性值可以省略 --> <button disabled>点击<button> const button = document.querySelector('button') console.log(button.disabled) // 默认为false，不禁用 button.disabled = true //只接受布尔值。禁用 </body>
12.3.4 自定义属性
-
HTML的标签分为标准属性和自定义属性；
-
标准属性：标签自带的属性，比如
class、id、title等； -
自定义属性：
- 在HTML5中推出了专门的
data-自定义属性； - 在标签上一律以
data-开头； - 在DOM对象上一律以
dataset对象的方式获取；
- 在HTML5中推出了专门的
-
例：
<body> <div class="box" data-id="10">盒子</div> <script> const box = document.querySelector('.box') console.log(box.dataset.id) </script> </body>
用户阅读注册协议案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn">我已经阅读用户协议(5)</button>
<script>
//先把按钮禁用
const button = document.querySelector('button')
button.disabled = true
let i = 5
function countDown() {
i--
button.innerHTML = `我已经阅读用户协议(${i})`
if (i == 0) {
clearInterval(n)
button.innerHTML = '同意'
button.disabled = false
}
}
let n = setInterval(countDown, 1000)
</script>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
