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树和样式规则生成渲染树；根据渲染树得到节点的几何信息进行布局（回流/重排）；根据计算和获得的信息进行页面绘制（重绘）；最后展示在页面上。

回流（重排）：当渲染树的部分或者全部元素的尺寸、结构、布局发生改变时，浏览器会重新渲染这部分或者全部文档的过程。

重绘：当节点元素的样式改变，但并不影响它在文档中的位置和文档布局时，称为重绘。

重绘不一定引起回流，但回流一定会引起重绘。