JavaScript(二)——DOM
Web APIs
一个页面就是一个文档（document），标签是元素（element），内容是节点（node），DOM中把以上内容都看作对象。
DOM文档对象模型
获取DOM元素
document.querySelector('')//返回匹配到的第一个元素 .box、#id、div 一个或多个选择器
document.querySelectorAll('')//匹配到符合的元素集（伪数组，有长度有索引、是没有数组方法）
//其他方法
document.getElementById('')
document.getElementByTagName('')
document.getElementByClassName('')
document.body//返回body元素
document.documentElement//返回html元素
操作元素内容
元素.innerText = ''//显示为纯文本，不解析标签
元素.innerHTML = ''//解析标签，尽量不要用
操作元素属性
元素.属性 = 值；
常见属性：href、title、src
操作元素的样式属性
1、通过style
元素.style.样式属性 = 值；
//如果属性有连字符，转小驼峰命名法
//需要单位时不要忘了单位
//js修改style样式产生的是行内样式
2、通过类名
元素.className='css类名'
3通过classList操作
元素.classList.add('类名')
元素.classList.remove('类名')
元素.classList.toggle('类名')//切换一个类名
4、操作表单元素属性
元素.属性名 = 新值；
disabled、checked、selected
5、自定义属性
定义：data-属性名字
获取：元素.dataset.属性名字
定时器（间歇函数）
let 变量名 = setInterval(函数，间隔时间)
关闭：clearInterval(变量名)
事件监听
元素.onclick = function(){}
元素.addEventListener('事件类型'，function(e){})//推荐使用
//事件对象e:包含事件触发时的相关信息
事件对象常用属性
type:获取事件类型
clientX、clientY：光标相对于浏览器可见窗口左上角位置
offsetX、offsetY：光标相对于当前DOM元素左上角位置
key：用户按下的键盘值(不提倡使用KeyCode)
字符串.trim()可以去除字符串左右的空格
//常见事件
鼠标事件：click、mouseenter鼠标经过、mouseleave
焦点事件：focus、blur
键盘事件：Keydown、Keyup
文本事件：input
//环境变量
函数内部特殊的变量this，代表当前函数运行时所处的环境
一般谁调用，this就是谁
//回调函数
当函数A作为参数传递给函数B时，我们称函数A为回调函数
事件流
事件完整执行过程中的流动路径
父->子 捕获阶段
子->父 冒泡阶段
实际工作中都是使用事件冒泡为主
阻止冒泡 事件对象e.stopPropagation()
阻止默认行为 e.preventDefault()
解绑事件
on事件方式：直接null覆盖
元素.onclick = null;
addEventListener事件方式：removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
匿名函数无法解绑
注意区分：
鼠标经过事件
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）
注册事件
on注册（L0）同一个对象，后面注册的事件会覆盖前面的事件
事件监听注册（L2）addEventListener，同一个对象，后面事件不会覆盖前面的事件
事件委托
原理：利用事件冒泡，给父元素注册事件，档触发子元素时，会冒泡到父元素身上，从而触发事件
事件对象e.target.tagName 可以获取真正触发事件的元素
页面加载事件
1、外部资源（图片、css、js）加载完毕时触发事件
监听页面所有资源加载完毕
window.addEventListener('load',function(){})
2、监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded'，function(){})
页面滚动事件
window.addEventListener('scroll',function(){})
//一般给window或document添加，也可以给某个元素加
滚动事件获取位置
元素.scrollTop (可写)
元素.scrollLeft (可写)
滚动到指定坐标
元素.scrollTo(x,y)
页面尺寸事件
会在窗口尺寸发生变化时触发的事件resize
window.addEventListener('resize',function(){})
获取元素可见部分的宽高(不含margin、border)
元素.clientWdith
元素.clientHeight
获取元素的宽高（包含外边距和边框）
元素.offsetWidth
元素.offsetHeight
获取元素的位置
元素.offsetTop
元素.offsetLeft
日期对象
实例化
获取当前时间
const data = new Data()
获取指定时间
const data = new Data('2023-10-2')
日期对象的方法
年份 getFullYear()
月份 getMonth()
天 getData()
星期 getDay()
小时 getHours()
分钟 getMinutes()
秒 getSeconds()
获取时间戳的三种方
data.getTime()
+new Data() //可以返回当前时间时间戳或者指定的时间戳
Data.now()
节点操作
DOM树里每个内容都称之为节点，如元素节点、属性节点、文本节点
查找节点
父节点 子元素.parentNode
子节点 父元素.childNodes
兄弟节点：
上一个兄弟节点 previousElementSibling
下一个兄弟节点 nextElementSibling
增加节点
一
1.创建节点 document.creatElement('标签名')
2.插入节点
插入到父元素所有子元素后面：父元素.appendChild(创建的节点元素)
插入到父元素某个子元素前：父元素.insertBefore(创建的节点元素，某个子元素)
二
克隆节点 元素.cloneNode(布尔值)//true则连同克隆后代节点
删除节点
删除元素必须通过父元素
父元素.removeChild(子元素)
M端事件
触屏事件touch
touchstart 手指触摸到DOM元素时触发
touchmove 手指在DOM元素上滑动时触发
touchend 手指从DOM元素上移开时触发
重绘和回流
浏览器是如何进行界面渲染的
解析HTML生成DOM树，同时解析CSS生成样式规则；根据DOM树和样式规则生成渲染树；根据渲染树得到节点的几何信息进行布局（回流/重排）；根据计算和获得的信息进行页面绘制（重绘）；最后展示在页面上。
回流（重排）：当渲染树的部分或者全部元素的尺寸、结构、布局发生改变时，浏览器会重新渲染这部分或者全部文档的过程。
重绘：当节点元素的样式改变，但并不影响它在文档中的位置和文档布局时，称为重绘。
重绘不一定引起回流，但回流一定会引起重绘。
