作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
什么是DOM
DOM（Document Object Model--文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用：开发网页内容特效和实现用户交互
DOM树
定义：将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树，描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
DOM对象（重要）
DOM对象
浏览器根据html标签生成的JS对象
1）所有的标签属性都可以在这个对象上面找到
2）修改这个对象的属性会自动映射到标签身上
console.dir()//打印对象，获取的信息比较清晰DOM的核心思想
把网页内容当作对象来处理
document对象
1）是DOM里提供的一个对象
2）所以它提供的属性和方法都是用来访问和操作网页内容的
3）网页所有内容都在document里面
获取DOM元素
根据css选择器来获取DOM元素（重点）
1.选择匹配的第一个元素
document.querySelector('css选择器')参数：包含一个或多个有效的css选择器字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象；如果没有匹配到，则返回null
可以直接操作修改
2.选择匹配的全部元素
document.querySelectorAll('css选择器')参数：包含一个或多个有效的css选择器字符串
返回值：css选择器匹配的NodeList对象集合，得到的是一个伪数组：
1）有长度有索引号的数组
2）但是没有pop()、push()等数组方法
不能直接修改，只能通过遍历（for）的方式一次给里面的元素做修改，类似数组方式获取
注意：哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已
其他获取DOM元素方法（了解）
//根据id获取一个元素
document.getElementById('id名')
//根据标签获取一类元素
document.getElementByTagName('标签名')
//根据类名获取一类元素
document.getElementByClassName('class名')操作元素
操作元素内容
元素.innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
元素.innerHTML属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符
纠结到底用谁，可以选择innerHTML
操作元素属性
操作元素常用属性
可以通过JS设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：href、title、src等
对象.属性=值控制元素样式属性
可以通过JS设置/修改标签元素的样式属性
1）比如通过轮播图小圆点自动更换颜色样式
2）点击按钮可以滚动图片，这是移动的图片的位置left等等
学习路径：
1.通过style属性操作CSS
对象.style.样式属性='值'注意：
1）赋值的时候，需要的时候不要忘记加css单位
2）如果样式属性名带有-连接符如background-color时，要使用小驼峰命名法改为backgroundColor
3）控制标签style行内样式，生成的是行内样式表，权重比较高
标签选择body，因为body是唯一的标签，可以直接写document.body.style
2.操作类名（className）操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式，在style中编写一个新类并写入样式
元素.className='类名'注意：
1）由于class是关键字，所以使用className去代替
2）className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
元素.className='类名 类名'3.通过classList操作类控制CSS(H5)
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名不影响以前类名
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')操作表单元素属性
表单很多情况，也需要修改属性
正常的有属性有取值的，跟其他的标签属性没有任何区别
1）获取：DOM对象.属性名
2）设置：DOM对象.属性名=新值
DOM对象.type
DOM对象.value表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除了该属性，比如：disabled、checked、selected
自定义属性
标准属性：标签天生自带的属性，比如class、id、title等，可以直接使用点语法操作，比如：disabled、checked、selected
自定义属性：
1）在html5中推出来了专门的data-自定义属性
2）在标签上一律以data-开头
3）在DOM对象上一律以dataset对象方式获取文章来源：https://www.toymoban.com/news/detail-816847.html
文章来源地址https://www.toymoban.com/news/detail-816847.html
到了这里，关于JS-DOM树和DOM对象的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
