// DOM是网页里面的所有内容，网页是通过浏览器打开的，所以DOM是BOM的一部分
1.get获取
// 1.如果元素在网页中只出现一次，就document获取
document.title = '我是帅哥呀'
document.body.style.backgroundColor = 'pink'
// 2.如果网页元素会经常出现，就要用特定的方法来获取
// 2.1getElementsByTagName根据标签的名称索取所有标签，获取到一个伪数组
let hs = document.getElementsByTagName('h2')
hs[0].innerText = '运城'
hs[1].innerText = '太原'
// 2.2 getElementByID 根据ID 获取对于的标签，如果ID不唯一，获取第一个
let bj = document.getElementById('bj')
bj.innerText = '天安门'
// 2.3 getElementsByName 根据name属性获取所有对应的标签
let red = document.getElementsByName('red')
for (let i = 0; i < red.length; i++) {
red[i].style.backgroundColor = 'red'
}
// 2.4 getElementsByClassName 根据Class类名获取所有对应的标签
let blue = document.getElementsByClassName('blue')
for (let i = 0; i < red.length; i++) {
blue[i].style.backgroundColor = 'blue'
}
2.ES6 新增
<div id="dt">大同</div>
<div id="cz">长治</div>
<hr>
<div class="a">
<div class="b">
<div class="c">运城</div>
</div>
</div>
<div class="c">太原</div>
<script>
// 封装一个获取元素的方法
function $(id) {
return document.getElementById(id)
}
$('dt').innerText = '临汾'
$('cz').innerText = '吕梁'
// ES6获取元素
// querySelector() 根据选择器规则，获取对应的第一个元素
//如果不唯一，只获取第一个
let c = document.querySelector('.a .b .c') //这里必须加空格
c.innerHTML = '苹果'
// querySelectorAll() 根据选择器规则获取所有的对应元素
let cs = document.querySelectorAll('.c')
cs.forEach(c => {
c.style.color = 'pink'
})
// 获取第二个C，参照CSS的属性写法就可以获取到
let c1 = document.querySelector('body>.c')
c1.style.color = 'blue'
</script>
