JavaScript（JS）DOM（四）
1、变量声明
变量声明有三个关键字，var、let、const，var是一种问题很多的写法，我们选择不使用，在const和let之中，我们优先选择const，这是因为很多变量我们在声明的时候就知道它不会被修改，同时运行时也很大程度上缓解了对数据类型的推测导致运行效率的下降。
- const声明的值不能更改，而且const声明变量的时候里面进行初始化；
- 对于引用数据类型，const声明的变量，里面存储的不是值，而是地址，例如修改对象中的元素，由于对象地址没有发生改变，所以不会报错。
2、DOM
DOM（文档对象模型）是一套将 HTML/XML 文档表示为树形结构的编程接口，它将文档中的元素、属性和文本都转化为可通过代码（主要是 JavaScript）访问和操作的节点。通过 DOM，开发者可以动态修改文档的内容、结构和样式，实现网页的交互效果，是让静态页面变为动态交互界面的核心技术基础。
2.1 DOM树
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树；
- 描述网页内容关系的名词；
- 作用：文档树直观的体现了标签与标签之间的关系。
2.2 DOM对象
DOM对象：浏览器根据html标签生成的JS对象；
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上。
2.3 获取DOM对象
2.3.1 根据CSS选择器获取DOM元素
1、选择匹配的第一个元素（可以直接操作修改）
- 参数：包含一个或多个有效的CSS选择器字符串；
- 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。
- document.querySelector(‘CSS选择器’)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>匹配一个元素</title></head><body><div><p>测试文字1</p><p>测试文字2</p></div><script>const word = document.querySelector('div p:first-child')console.log(word)</script></body></html>2、选择匹配的多个元素（不能直接操作修改，需要遍历）
- 参数：包含一个或多个有效的CSS选择器字符串；
- 返回值：CSS选择器匹配的NodeList对象集合。
- document.querySelectorAll(‘CSS选择器’)
<script>const words = document.querySelectorAll('div p')for (let i = 0; i < words.length; i++) {console.log(words[i])}console.log(words)
</script>2.3.2 innerText属性
将文本内容添加/更新到任意标签位置；
显示纯文本，不解析标签。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>innerText属性</title></head><body><div class="box">测试文字</div><script>const box = document.querySelector(".box")console.log(box.innerText)box.innerText = "<strong>修改文字</strong>"</script></body></html>2.3.3 innerHTML属性
将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符。
<script>const box = document.querySelector(".box")console.log(box.innerHTML)box.innerHTML = "<strong>修改文字</strong>"
</script>