目录
2.修改DOM元素内容(innertext;innerhtml)
一.DOM对象
DOM(文档对象模型)是JavaScript的三大重要组成部分,是webAPI两大模型之一,另一个是BOM（浏览器对象模型）
1.获取DOM对象
1.1选择匹配的一个元素
根据css选择器来获取DOM对象
选择匹配的一个元素
语法: document.querySelector('css选择器')
// 参数:字符串,css选择器 所以一定要加引号
// 返回值:css选择器匹配的第一个元素
// 获取元素 类选择器写法
let box = document.querySelector(".box")
console.log(box);
// 选择第一个div 标签选择器写法
let div = document.querySelector('div')
console.log(div);
// id选择器写法
let div2 = document.querySelector('#three')
console.log(div2);
// 复合选择器写法
let li = document.querySelector('ul li:nth-child(2)')
console.log(li);1.2选择匹配的多个元素
语法:document.querySelectorAll('css选择器')
const lis = document.querySelectorAll('.nav li')
// 得到的是一个伪元素,有长度有索引号,没有pop,push等数组方法
// 可以通过遍历数组的方法,打印每一个元素
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}1.3.其他获取DOM元素的方法
// 2.1根据id获取一个元素
document.getElementById('nav')
// 2.2根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div')
// 根据 类名获取元素 后去页面 所有类名 为 nav的
document.getElementsByClassName('w')2.修改DOM元素内容(innertext;innerhtml)
1.元素的innertext属性 不能解析标签内容
// 1.元素的innertext属性 不能解析标签内容
// 获取标签
const a = document.querySelector('.box')
// 修改内容
a.innerText = '<h1>我是修改后的</h1>'2.元素的innerhtml属性 可以解析标签内容(建议使用)
//元素的innerhtml属性 可以解析标签内容(建议使用)
const b = document.querySelector('.box1')
b.innerHTML = '<h1>我是第二次修改后的内容</h1>'
3.修改DOM元素属性
修改对象属性的语法: 对象.属性=新值
// ?1. 设置/修改元素常用属性
// 通过js换图片
// 1.获取对象
let pic = document.querySelector('img')
// 查看对象的属性 console.dir()
console.dir(pic)
// 2修改对象属性 对象.属性=新值
pic.src = '../素材/images/4.webp'
pic.title = '王强'实现页面刷新图片随机的效果:
// 页面刷新图片随机
// 随机函数
function getRandom(n, m) {
return Math.floor(Math.random() * (m - n + 1)) + n
}
let index = getRandom(1, 6)
document.write(index)
pic.src = `../素材/images/${index}.webp`4.修改元素样式属性(style)
4.1通过style属性操作css
// ? 2.1通过style属性操作css
// div变量的值是一个dom对象
// dom对象里面有一个属性style但是 他的属性值 又是一个对象
// 注意:在css中的background-color 在js要写为backgroundColor
在css中样式中如果有这样的带'-'连接符的,需要把连接符去掉并且把之后的一个字母改为大写.
如: padding-left ==> paddingLeft
// 获取元素
// div = document.querySelector('div')
// // 通过style修改样式属性 对象.style.样式属性=值
// div.style.width = '200px'//变成宽高相等
// // 注意:在css中的background-color 在js要写为backgroundColor
// div.style.backgroundColor = 'pink'4.2通过修改类名修改样式
我们先在css中定义一个类名:
.active {
width: 300px;
height: 300px;
background-color: yellow;
}?使用className属性修改类名
1.对象.className='新类名'//会把原来的类名覆盖
?使用classList方法操作类名
2.对象.classList.add=(新类名)//追加类名
3.对象.classList.add=(新类名)//删除类名
4.对象.classList.toggle=(新类名)//切换类名 如果有这个类则删除,没有则增加
let div2 = document.querySelector('div')
//设置样式 加上新类名
// div2.className = 'active'//会把原来的类名覆盖
// 为了避免把原来的类名覆盖
// 使用classList的方法操作类名
// // 注意: 属性通过等号赋值 ,方法通过()传递参数
// div2.classList.add('active')//追加类名
// div2.classList.remove('active')//删除类名
div2.classList.toggle('active')//切换类名 如果有这个类则删除,没有则增加5. 设置,修改表单元素属性
5.1value属性
语法:input.value = '新内容'
// 获取元素
let input = document.querySelector('input')
// 修改
input.value = 'oppo手机'
5.2type属性
语法:input.type = 'password'
5.3按钮的disabled属性
按钮.disabled = false//表示按钮启用
按钮.disabled = true//表示按钮禁用
// 获取按钮
let btn = document.querySelector("button")
btn.disabled = true 
5.4复选框checkbox
复选框对象名.checked = true //复选框选中
复选框对象名.checked = false //复选框不选中
let checkbox = document.querySelector('.check')
checkbox.checked = true
二.计时器setInterval
1.间歇定时器
// ?间歇定时器
// 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
// 例如：网页中的倒计时
// 要实现这种需求，需要定时器函数
// 定时器函数有两种，今天我先讲间歇函数
// ?开启定时器
// setInterval(函数,间隔时间)
// 时间单位是毫秒
// setInterval(function () {
// console.log('今天掉头发了吗?');
// }, 1000)//? 关闭定时器
// clearInterval(变量名)
// clearInterval(timer)
注意:关闭计时器前要把setInterval的返回值赋值给一个变量
function sing() {
document.write('啦啦啦~~~')
}
// setInterval的返回值是一个非零数字
let timer = setInterval(sing, 2000)//这里sing不加(),加了说明立即调用
console.log(timer);2.间歇定时器应用
// 需求:用户在等待10秒后才能点击同意
代码如下:
<!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>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(10)</button>
<script>
// 需求:用户在等待10秒后才能点击同意
// 获取按钮 把按钮赋值给变量
let btn = document.querySelector('button')
// 我们需要一个变量用来计数
let i = 10
// .定义一个定时器
let timer = setInterval(
// 定义函数 实现倒计时效果
function () {
i--;
btn.innerHTML = `我已经阅读用户协议(${i})`
// 判断倒计时结束
if (i <= 0) {
// 按钮开启
btn.disabled = false
btn.innerHTML = `我已经阅读用户协议`
// 停止计时器
clearInterval(timer)
}
// return 0
}, 1000)
</script>
</body>
</html>