1、获取元素的方法
//1.document.querySelector
//语法：document.querySelector('选择器'),如果没有获取成功，就返回null
//只能获取到满足条件的第一个元素
let a = document.querySelector('a')//获取第一个满足a标签的元
let a = document.querySelector('.a')//获取第一个满足类名为a的元素
let a = document.querySelector('#a')//获取第一个满足ID为a的元素
//2.document.querySelectorAll('选择器')，可以获取满足条件的所有元素，返回一个伪数组，就算没有获取到任何内容返回的也是一个空数组，不能够直接调用里面的数据，需要进行遍历每一项才能使用
let a = document.querySelectorAll('a')
a.forEach(function(v, i) {
console.log(v, i)
})
//3.获取其他元素的方法
document.getElementById()//获取满足id名的元素
document.getElementsByTagName()//获取满足标签名的元素
document.getElementsByClassName()//获取满足类名的元素
2.元素操作的方法修改文本
<body>
<div>
<p>p元素</p>
<span>span元素</span>
<h1>h1</h1>
</div>
<script>
// 如果innerText或者innerHTML没有赋值，那么就是取值
let div = document.querySelector('div')
// innerText:获取标签之间的文本内容，标签会被忽略
console.log(div.innerText)
// innerHTML：获取标签之间的完整结构
console.log(div.innerHTML)
</script>
</body>
//使用innerText与innerHTML产生的内容会在元素内产生，覆盖元素里的其他文本内容
//innerText：为元素设置标签之间的文本内容，
//HTML:为元素设置标签之间的文本内容,如果内容中有html结构，会进行解析
3.随机点名的小案例
<body>
<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
let names = ['同学a', '同学b', '同学c', '同学d', '同学e']
// 前置知识：为按钮绑定单击事件：单击按钮之后再进行处理
let btn = document.querySelector('button')
let span = document.querySelector('span')
// 为btn添加单击事件的监听，当用户单击之后，就调用你传入的回调函数进行处理
// click:单击
btn.addEventListener('click', function() {
// 单击按钮之后的业务处理
// 生成一个随机索引
// Math.random():生成一个0 ~ 1 之间的随机数，包含0，但是不包含1,乘以数组的长度，parseInt保留整数
let index = parseInt(Math.random() * names.length)
// 根据索引获取姓名
let name = names[index]
// 将姓名渲染到指定的元素中
span.innerText = name
})
</script>
</body>
4.给元素的style添加属性.
<body>
<input type="password" class="username" />
<button class="changeType">显示</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div class="list">
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
let changeType = document.querySelector('changeType')
let username = document.querySelector('.username')
// 全选复选框
let chkAll = document.querySelector('.chkAll')
// 列表结构中的复选框
let chks = document.querySelectorAll('.list input')
// 为全选复选框添加单击事件
chkAll.addEventListener('click', function() {
// 获取当前全选复选框的状态值，选中为true,否则为false
let state = chkAll.checked
// 遍历下面的所有复选框，为每个设置checked状态值
for (let i = 0; i < chks.length; i++) {
chks[i].checked = state
}
})
changeType.addEventListener('click', function() {
// username.disabled = true
// 获取当前输入框的type值
// let type = username.type
// console.log(type)
// if (type === 'password') {
// // 修改为text
// username.type = 'text'
// } else {
// // 修改为password
// username.type = 'password'
// }
// 根据当前type值进行type属性的设置
// username.type = username.type === 'password' ? 'text' : 'password'
})
</script>
</body>
5、定时器
//书写格式 定时器：每隔一段时间就重复做一个操作
// 1.语法： setInterval(执行的函数，时间间隔)
// 2.停止定时器：
// > let timeId = setinterval()
// > clearInterval(timeId)
// 获取btn按钮
<body>
<input type="button" value="倒计时5秒钟" />
<script>
// 获取btn按钮
let btn = document.querySelector('input')
//设置一个值为5
let I = 5
//单击事件，作为一个开始
btn.addEventListener('click', function () {
//句柄命名。创建一个定时器
let timeID = setInterval(function () {
//每次执行I--让I的值-1
I--
//单标签的内容修改为value值，修改里面的值
btn.value = `倒计时${I}秒钟`
//当倒计时开始的时候让按钮处于禁用状态
btn.disabled = true
if (I == -1）
//结束倒计时
clearInterval(timeID)
//重新赋值I让倒计时重新点击触发
I = 5
btn.disabled = false
btn.value = "倒计时5秒钟"
}
//每次间隔为1000毫秒 也就是为1秒触发一次
}, 1000)
})
</script>
</body>
6、轮播图
<body>
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
// 获取元素
let img = document.querySelector('img')
let p = document.querySelector('p')
// 增加索引值
let index = 1
// 创建定时器
let timeID = setInterval(function () {
// 计时器递增 index++
index++
// 因为没有后续的图片，需要让索引达到某个值返回1
if (index == 10) {
index = 1
}
console.log(index);
// 设置图片路径
img.src = `./images/b0${index}.jpg`
// 给p标签设置内容
p.innerText = `第${index}张图片`
}, 1000)
let div = document.querySelector('div')
div.addEventListener('mouseenter', function () {
clearInterval(timeID)
})
div.addEventListener('mouseleave', function () {
setInterval(function () {
// 计时器递增 index++
index++
// 因为没有后续的图片，需要让索引达到某个值返回1
if (index == 10) {
index = 1
}
console.log(index);
// 设置图片路径
img.src = `./images/b0${index}.jpg`
// 给p标签设置内容
p.innerText = `第${index}张图片`
}, 1000)
})
</script>
</body>
1
