好久不见
整理一下web api 的 knowledge
1、
DOM：文档对象模型
DOM树：直观的体现了标签与标签之间的关系。
DOM对象：浏览器根据html标签生成的js对象。
DOM的核心思想：把网页内容当作对象来处理。
document对象：是DOM里提供的一个对象，网页所有的内容都在document里。
2、
获取DOM对象：
①选择匹配的第一个元素：document.querySelector('css选择器')
返回值：css选择器匹配的第一个元素，返回的是object，如果没有匹配则返回null。
②选择匹配多个元素：document.querySelectorAll('css选择器')
返回值：css选择器匹配的nodelist对象合集，得到一个伪数组。
伪数组：有长度有索引号的数组，但是没有pop()，push()等数组方法，需要每一个元素用for来遍历。
3、
修改/设置DOM元素内容
①document.write()
②元素.innerText = '新值'
只解析内容，不识别标签。
③元素.innerHTML = '新值'
可识别标签，可解析内容。
如果在纠结用那个，那就选innerHTML吧。
4、设置/修改元素常用属性
对象.属性 = '新值‘
一个简单的应用代码
<img src="./1.jpg" alt="">
<script>
let pic = document.querySelector('img')
function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min
}
let random = getRandom(1,4)
pic.src = `./${random}.jpg`//此处就是修改属性5、
设置/修改样式属性
①通过style进行控制
对象.style.样式属性 = ‘新值’
样式属性无‘-’，可以小驼峰命名法来表示
②className
现在style中设置一个类选择器，然后设置需要的css样式，再使用
元素.className = ‘类’
若要保留原来的类，则两个都写上。
③元素.classList.add('类名')：追加，不影响以前的类
元素.classList.remove('类名')：删除
元素.classList.toggle('类名')：切换，有这个类名则删除，没有则加上。
6、
设置/修改表单元素属性
表单.属性 = '新值'
表单属性中添加就有效果，删除就没有效果，一律用布尔值来表示。
①启用/禁用按钮
<body>
<button disabled>确认</button>
<script>
let btn = document.querySelector('button')
btn.disabled = true //禁用
btn.disabled = false //启用
</script>
</body>②勾选复选框
<body>
<input type="checkbox" checked>
<script>
let checkbox = document.querySelector('input')
checkbox.checked = false //取消勾选
checkbox.checked = true //勾选
</script>
</body>7、
定时器
①开启定时器 setInterval(function(){},间隔时间)
let 变量名 = setInterval(function(){},间隔时间)
②关闭计时器
clearInterval(变量名)
一个简单的等待进入案例。
<button class="btn" disabled>用户需等待(6)</button>
<script>
//1.获取元素
let btn = document.querySelector('button')
//2.设置一个变量，用作定时器的倒计时变量
let i = 6
//3.设置定时器
let time = setInterval(function(){
i--
btn.innerHTML = `用户需等待(${i})`
//如果i===0 ，清除定时器，开启按钮
if( i === 0){
clearInterval(time)
btn.disabled = false
btn.innerHTML = '我同意，并进入'
}
},1000)
</script>