什么是DOM对象：
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
js如果想要操作标签，需要通过DOM对象（凡是对标签的操作都是经过document），DOM是文档对象模型。
document 提供了一些方法可以获取标签
1. 通过 id 属性值来获取一个标签；
document . getElementById("id名") ；
<body>
<div id="one">
<span></span>
<span></span>
<span id="two"></span>
<p class="p1"></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var o1 = document.getElementById("two");
console.log(o1); //<span id="two"></span>
</script>
</body>2. 通过 标签名称 来获取标签，获取的是数组形式的集合，不管是有多少个标签都是在集合中
document . getElementsTagName("标签名称")
<body>
<div id="one">
<span></span>
<span></span>
<span id="two"></span>
<p class="p1"></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var o1 = document.getElementsByTagName("span");
var o2 = document.getElementsByTagName("li");
console.log(o1,o2); // HTMLCollection(3) [span, span, span#two, two: span#two]
HTMLCollection(4) [li, li, li, li]
</script>3. 通过 class 类名来获取标签，获取的是数组形式的集合，不管有多少个标签 都在数组集合中
document . getElementsByClassName("class类名");
<div id="one">
<span></span>
<span></span>
<span id="two"></span>
<p class="p1">我是p标签</p>
<ul>
<li></li>
<li></li>
<li></li>
<li class="p1">我是i标签</li>
</ul>
</div>
<script>
var o3 = document.getElementsByClassName("p1");
for( var i = 0; i< o3.length; i++){ // 因为是数组集合 所有要进行循环遍历
o3[i].style.color = "red" // 设置字体颜色
}
console.log(o3) // HTMLCollection [p.p1]
</script>★★★★4. 通过选择器获取标签， 获取单个标签，若有多个则获取第一个符合条件的标签
document . querySelector("标签名")
<div id="one">
<span></span>
<span></span>
<span id="two"></span>
<p class="p1">我是p标签</p>
<ul>
<li></li>
<li></li>
<li></li>
<li class="p1">我是i标签</li>
</ul>
</div>
<script>
var qs = document.querySelector("li")
console.log(qs); //<li></li> 若有多个，获取第一个符合条件的标签
</script>★★★★5. 通过选择器获取标签，获取的是多个标签，是一个数组的集合形式
document . querySelectorAll("标签名")
<div id="one">
<span></span>
<span></span>
<span id="two"></span>
<p class="p1">我是p标签</p>
<ul>
<li></li>
<li></li>
<li></li>
<li class="p1">我是i标签</li>
</ul>
</div>
<script>
var qs1 = document.querySelectorAll("li")
console.log(qs1); //NodeList(4) [li, li, li, li.p1] // 可以通过索引值，获取该标签，遍历数组
console.log(qs1[2]); // <li></li> 获取索引值为2的li标签
</script>