基础认识
PS:
1、渲染的过程：动态数据 ------填充-----》静态结构
作用：
1、使用JS去操作HTML和浏览器，开发网页内容和实现用户交互
2、功能：能够改变页面中的所有 HTML 元素，能够改变页面中的所有 HTML 属性，能够改变页面中的所有 CSS 样式，能够对页面中的所有事件做出反应
分类：
1、DOM（文档对象模型）
2、BOM（浏览器对象模型）
概念
1、Document Object Model，用来呈现以及与任意HTML或XML文档交互的API
2、是浏览器提供的一门专门用来操作网页内容的功能
结构
1、DOM树
一、将HTML文档以树状结构直观的表现出来；
二、描述网页内容关系的名词
三、作用：文档树直观的体现了标签与标签之间的关系
根节点、元素节点、属性节点、文本节点
2、DOM对象
定义：浏览器根据HTML标签生成的JS对象，可查找、可修改
核心思想：将网页内容当做对象来处理
document对象：由DOM提供的一个对象，其属性与方法用来访问和操作网页内容，包含所有网页内容
获取DOM对象
1、精确查找选择页面中的标签元素
2、等等
一、根据CSS选择器获取DOM元素
CSS选择器分类：类选择、id选择、伪类选择、
选择第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个有效的CSS选择器--------字符串
返回值：匹配到的第一个元素，一个HTMLElement对象，失败返回null
选择多个元素
语法：document.querySelectotAll('css选择器')
参数：包含一个或多个有效的CSS选择器-------字符串
返回值：CSS选择匹配的NodeList对象集合，失败返回空数组
1、NodeList对象中没有map方法与filter方法
2、NodeList为一个伪数组，有长度有索引，无法使用写的数组方法
代码实现：
//class名选择器
let mya = document.querySelector('.mya')
//id选择器
let myh2 = document.querySelector('#myh2')
//多个元素选择
let spanList = document.querySelectorAll('span')
console.log(spanList);
spanList.forEach((v,i)=>{
console.log(v,i);
v.style.color = 'red'
})
//用法
let item = document.querySelectorAll('span')[index]
二、其他获取元素方式
1、根据id获取一个元素
document.getElementById('id')
//重名id 返回第一个元素，失败返回null
2、根据标签获取一类全部元素
document.getElementByTagName('tagName')
//返回伪数组，有长度索引，但不能使用数组方法
//失败返回空数组
3、根据类名获取所有元素
document.getElementByClassName('className')
//返回伪数组，有长度索引，但不能使用数组方法
//失败返回空数组
\4、DOM树里的唯一标签可以直接引用
let bodyItem = document.body
let htmlItem = document.documentElement
let headItem = document.head
let footerItem = document.footer
点操作的对象为内置属性，自定义属性会忽略操作
常规标签 内置属性：
div p span： id class name style a: href img: src alt title input: type max min maxlength value id name class
只读状态：readonly >> input button 选中状态: checked >> radoi checkbox 选项选中状态： selected >> select 禁用状态：disabled >> input button
设置/修改DOM元素内容
一、修改标签元素里的内容
1、document.write()
只能将文本追加到的位置
文本内的标签会被解析
document.write(`我好憨`)
2、documentObject.innerText = str
将文本内容添加/更新到指定标签位置
文本标签不会被解析
不赋值则取值，只返回文本内容
let INFO = document.getElementById('info')
INFO.innerText = '<p>我好憨</p>'
3、documentObject.innerHTML = str
将文本内容添加/更新到指定标签位置
文本包含的标签会被解析，
不赋值则取值，取包括HTML标签在内的所有内容
注意补充转义字符的使用：当解析标签内含有不解析标签字符的解决方法
let INFO = document.getElementById('info')
INFO.innerHTML = '<h3>我好憨</h3>'
备注：
1、inner方法会对原有内容进行覆盖，
2、innerText不能获取双标签与input表单内的输入文本域内容,通过value获取
例如：
<body>
<textarea>内容</textarea>
<button>测试</button>
<script>
let textItem = document.querySelector('textarea')
let btnItem = document.querySelector('button')
text
</script>
</body>
3、伪元素不属于页面无法直接获取，需要通过window.getComputedStyle获取 4、通过getPropertyValue('css')获取css属性
设置/修改DOM元素属性
添加 修改常用属性
例如：修改href、title、src等
//对象.属性 = 值
let pic = document.querySelector('img')
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'
添加 修改元素样式属性
例如：通过轮播图小圆点自动更换颜色样式，滚动图片
1、通过style属性操作css
PS:
1、修改样式通过style属性引出
2、如果属性有-连接符，需要转换为小驼峰命名法
3、赋值的 value 要加上必要单位
documentObject.style.css = value
//块宽高
1.通过dom的style属性获取宽和高，只能获取内联属性的值
2.无论像是class还是内联还是style都会被浏览器渲染，在渲染之后就会通过currentStyle，不过只有IE支持
3.getComputedStyle兼容Firefox和Chrome
4.getBoundingClientRect，主要是基于绝对位置的计算（能够拿到top、left、width、height）
5、块级元素无法通过style来获取宽高，可以通过offsetHeight
2.操作类名className操作css
用className代替class关键字
className 直接赋值是覆盖原有的，添加需要连接
documentObject.className = '类名'
//className含标签对象的全部类
domObj.className = `${domObj.className} mydiv`
3、通过classList操作类控制Css
解决clasName 容易覆盖以前类名，通过classList追加
不影响原有类名
classList返回的是:一个包含元素的类名列表
//在元素中添加一个或多个类名。
//如果指定的类名已存在，则不会添加
documentObject.classList.add('类名')
//移除元素中一个或多个类名
//移除不存在的类名，不会报错
documentObject.classList.remove('类名')
//切换一个类？
//toggle(token: string, force?: boolean): boolean
//执行逻辑：token为类名，存在该类则移除并返回false,否则添加返回true，force为设置是否强制添加（true）/删除（false）
documentObject.classList.toggle('类名')
//查找类名,返回Boolean
documentObject.classList.contains(class)
//根据索引查找类，返回类名，失败返回null
documentObject.classList.item(索引)
设置 修改表单元素属性
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
//属性数据类型只取Boolean，以表属性是否生效
class.disabled = true;
class.checked = false;
class.selected = true;
