DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。
说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。
在DOM学习中，记住最重要的一句话：每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。
DOM的核心：把内容当成对象来处理
获取DOM对象
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）querySelector()；
querySelector():获取满足条件的第一个元素，获取到的元素是dom元素，意味着可以直接操作，如果没有匹配到则返回null
例子
document.querySelector()
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<h2 id="myh2">我是h2</h2>
</div>
<script>
let doms = document.querySelector('span')
doms.style.color = 'red'
</script>
</body>
分析：
这里使用document.querySelector()的方法获取元素为span标签元素，然后使用DOM对象的style对象来设置div元素颜色为红色。
（2）querySelectorAll()；
在JavaScript中，如果想获取所有相同元素，我们可以使用document对象的querySelectorAll()方法。
说明：
querySelectorAll()方法都是用于获取表单元素。
querySelectorAll(注意):获取满足条件的所有元素，获取到的是伪数组，伪数组不能直接操作，需要遍历伪数组，获取里面的每一个值进行操作
例子
<span>ppp</span>
<span>pp22</span>
<span><a href="">dddd</a></span>
<span>我还是span</span>
<h2>我是h2</h2>
<script>
let spans = document.querySelectorAll(`span`)
console.log(spans)
for (let i = 0; i < spans.length; i++) {
console.log(spans[i])
spans[i].style.color = `red`
}
</script>
设置/修改DOM元素
如果想要修改标签元素里面的内容,可以使用以下方法:
对象.innertext属性:box.innertext='<h3>前端程序员的头发都很多</h3>',innertext文本中包含的标签不会被解析
对象.innerHTML属性:box.innertext='<h3>前端程序员的头发都很多</h3>',innerHTML文本中包含的标签会被解析
设置/修改DOM元素属性
可以通过JS设置/修改标签元素属性，比如通过src修改图片类型
let pic=document.querySelector('img')
pic.src='./images/b02.jpg'
pic.title='这是一个图片'
设置/修改元素样式属性
通过style属性操作css
注意:因为我们是操作样式属性，在操作类似宽高值等后面的数字别忘记添加单位
对象.style.样式属性=值
let box=document.querySelector(.box)
box.style.backgroundColor='red'
操作类名(className)操作css
如果修改的样式比较多，直接通过style属性操作比较繁琐，我们可以通过借助css类名的形式
active是一个css类名
元素.className='active'
操作classlist操作css 由于className容易覆盖以前的类名，我们可以通过classlist方式追加和删除类名
追加一个类
元素.classlist.add('类名')
删除一个类
元素.classlist.remove('类名')
切换一个类
元素.classlist.toggle('类名')
设置/修改表单元素
案例
<body>
<input type="password" class="pass" />
<button class="chkText ">变</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div class="lists">
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
// 获取元素
let chkText = document.querySelector(`.chkText`)
let pass = document.querySelector(`.pass`)
// 绑定事件
chkText.addEventListener(`click`, function () {
//ture改变文档类型为密码否则为文本类型
pass.type == `text` ? (pass.type = `password`) : (pass.type = `text`)
})
// 获取元素
let chkAll = document.querySelector(`.chkAll`)
let listChks = document.querySelectorAll(`.lists > input`)
// 绑定事件
chkAll.addEventListener(`click`, function () {
//给全选按钮声明变量
let chksTate = chkAll.checked
//遍历input，当全选选中时input也都选中
for (let i = 0; i < listChks.length; i++) {
listChks[i].checked = chksTate
}
})
</script>
</body>
定时器-间歇函数
作用：每隔一段时间调用这个函数
setInterval(函数，间隔时间)
function init(){
console.log('前端程序员')
}
每隔一段时间调用init
setInterval(init,1000)注意：函数名字不需要加括号
关闭定时器
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)
<body>
<button>别说了</button>
<button>继续说</button>
<span>10</span>
<script>
let btn = document.querySelector('button:nth-of-type(1)')
let bttn = document.querySelector('button:nth-of-type(2)')
let span = document.querySelector('span')
let count = 10
let timerId
function init() {
timerId = setInterval(function () {
count--
span.innerHTML = count
if (count == 0) {
count = 10
}
}, 1000)
}
init()
btn.addEventListener('click', function () {
clearInterval(timerId)
})
</script>
</body>
