JavaScript进阶之DOM

---

什么是DOM？

DOM（Document Object Model）文档对象模型，是浏览器提供的一套专门用来操作网页内容的功能，用于开发网页内容特效和实现用户交互。

• DOM树

将HTML文档以树状结构直观的表现出来，直观体现标签与标签之间的关系

• DOM对象

浏览器根据html标签生成的JS对象：
1.所有的标签属性都可以在这个对象上面找到
2.修改这个对象的属性会自动映射到标签身上
DOM的核心思想：将网页内容当做对象来处理

document对象：
DOM中最外层的对象
例如document.write()
网页所有内容都在document里面

获取DOM对象

根据CSS选择器获取

• 选择匹配的第一个元素

//document.querySelector('css选择器')
const div = document.querySelector('div')	//获取第一个div标签对象

参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象

• 选择匹配的多个元素

//document.querySelectorAll('css选择器')
const divArr = document.querySelectorAll('div')	//获取所有div标签对象

参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的NodeList对象集合
得到的是一个伪数组：有长度有索引号的数组；没有pop() push()等数组方法；想要得到里面的每一个对象，则需要遍历（for）的方式获得

其他获取DOM元素方法

• 根据id获取一个元素

document.getElementById('nav')

• 根据标签获取一类元素

document.getElementsByTagName('div')

• 根据类名获取元素

document.getElementsByClassName('w')

操作元素内容

• 元素innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

<div class="box">我是文字的内容</div>
<script>
    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.修改文字内容  对象.innerText 属性
    console.log(box.innerText)  // 获取文字内容
    box.innerText = '我是一个盒子'  // 修改文字内容
    box.innerText = '<strong>我是一个盒子</strong>'  // 不解析标签
</script>

• 元素innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

<div class="box">我是文字的内容</div>
<script>
    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.innerHTML 解析标签
    console.log(box.innerHTML)
    box.innerHTML = '<strong>我要更换</strong>'
</script>

操作元素属性

• 操作元素常用属性

语法：对象.属性 = 值

<img src="./images/1.jpg" alt="">
<script>
    // 1.获取图片元素
    const img = document.querySelector('img')
    // 2.修改图片对象属性   对象.属性 = 值
    img.src = './images/2.jpg'
    img.title = 'ROG'
</script>

• 操作元素样式属性

1.通过style属性操作CSS
修改样式比较少的情况下有优势
生成的是行内样式表，权重比较高
语法：
对象.style.样式属性 = 值

<div class="box"></div>
<script>
    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.修改样式属性   对象.style.样式属性 = '值'  别忘了跟单位
    box.style.width = '300px'
    // 多组单词的，采用 小驼峰命名法
    box.style.backgroundColor = 'hotpink'
</script>

2.通过类名（className）操作CSS
如果修改的样式较多，通过style属性修改比较繁琐，此时可借助于CSS类名的形式
className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名：元素.className = ‘active1 active2’
语法：
元素.className = ‘active’ //active是一个CSS类名

<div class="nav">123</div>
<script>
    // 1.获取元素
    const div = document.querySelector('div')
    // 2.添加类名  box ，保留之前的类名 nav
    div.className = 'nav box'
</script>

3.通过classList操作CSS（重点掌握）
为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名
语法：
追加一个类——元素.classList.add(‘类名’)
删除一个类——元素.classList.remove(‘类名’)
切换一个类——元素.classList.toggle(‘类名’)

<div class="box">文字</div>
<script>
    // 通过classList添加
    // 1.获取元素
    const box = document.querySelector('.box')
    // 2.修改样式
    box.classList.add('active')		//追加类
    box.classList.remove('box')		//删除类
    box.classList.toggle('active')	//切换类，有就删掉，没有就加上
</script>

• 操作表单元素属性

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

<input type="checkbox" name="" id="">
<script>
    // 1.获取
    const ipt = document.querySelector('input')
    // 2.设置
    ipt.checked = true
    // ipt.checked = 'true'  // 会选择，但不提倡，有隐式转换
</script>

• 自定义属性

标准属性：
标签天生自带的属性，比如class id title等，可以直接使用点语法操作，比如：disabled、checked、selected

自定义属性：
在html5中推出来专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)		//输出 1
    console.log(one.dataset.spm)	//输出 不知道
</script>

---

总结

以上就是今天要讲的内容，主要介绍DOM对象的获取使用，在JavaScript中，DOM是至关重要的一部分，一定要多学多练。