DOM
<body>
<h2 class='blue'>11</h2>
<h2 name='red'>22</h2>
<div id='sh'>33</div>
<div id='sh'>44</div>
<P name='red'>55</P>
<P class='blue'>66</P>
<script>
// DOM是网页的所有内容，网页是通过浏览器打开的，所以DOM是BOM的一部分
console.log(window);//window对象是整个BOM
console.log(window.document);//window对象的document是DOM
// 使用DOM获取网页元素
// 1.如果该网页元素，在一个网页中之后出现一次，通过document可以直接获取
document.title = '好好学习DOM'
document.body.style.backgroundColor = 'yellow'
// 2.如果网页元素，在网页中会经常使用，就需要通过特定的方法来获取
// getElementsByTagName()方法，根据标签的名称获取所有改标签
let hs = document.getElementsByTagName('h2')
// 通过下标找到对于标签
hs[0].innerText = '555'
hs[1].innerText = '666'
// getElementById()方法，根据标签ID属性名称，获取对于的标签
// 如果id属性值不唯一，只获取第一个
let sh = document.getElementById('sh')
sh.innerText = '777'
// getElementsByName()方法，根据标签的name属性值，获取所有对应的标签
let red = document.getElementsByName('red')
for(i=0;i<red.length;i++){
red[i].style.color = 'red'
}
// getElementsByClassName()方法根据class属性值，获取所有对应的标签
let blue = document.getElementsByClassName('blue')
for(i=0;i<blue.length;i++){
blue[i].style.backgroundColor = 'blue'
}
</script>
</body>
