【JavaScript】—DOM操作1：获取元素

---

---

一、什么是DOM？

1.1 概念

DOM（Document Object Model），是文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型，通过文档对象模型中的方法，可以对网页元素进行增删查改。

1.2 图例演示

document的类型是Document，是根节点，可通过其对象document来调用网站中的所有元素。
html标签是根标签。

二、查找HTML元素

2.1 getElementById()

作用：通过id查找HTML元素

代码演示：

<div id="div1"></div>
<script>
	const div1 = document.getElementById('div1')//通过id获取HTML元素
</script>

2.2 getElementsByTagName()

作用：通过标签名获取HTML元素集合（伪数组）

代码演示：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
	const mydiv = document.getElementsByTagName('div')//获取网页中所有标签为'div'的元素
</script>

2.3 getElementsByClassName()

作用：通过类名获取HTML元素集合

代码演示：

<div class="class1"></div>
<span class="class1"></span>
<p class="class1"></span>
<script>
	const elements = document.getElementsByClassName('class1')
</script>

2.4 querySelector()

作用：返回文档中匹配指定CSS选择器的第一个元素

代码演示：

<div class="class1"></div>
<div class="class1"></div>
<p></p>
<span id="span1"></span>
<script>
	const e1 = document.querySelector('.class1')//获取第一个class为class1的HTML元素
	const e2 = document.querySelector('#span1')//获取第一个id为span1的HTML元素
	const e3 = document.querySelector('p')//获取第一个p标签
</script>

2.5 querySelectorAll()

作用：返回文档中汽配指定CSS选择器的全部元素

代码演示：

<div class="div1">第一个</div>
<div class="div1">第二个</div>
<div class="div1">第三个</div>
<script>
	const elements = document.querySelectors('.div1')//获取所有class为div1的HTML元素
</script>

总结

今天介绍了DOM操作之获取HTML元素。