js寒假集训4

DOM☆

获取元素，移除元素，创建元素，添加元素，获取元素属性，加css样式，绑定事件…

获取元素的方式

document.documentElement 获取html部分
document.head 获取head部分
document.body 获取body部分

document.getElementById（“id名”）通过id获取元素

document.getElementByClassName（“class名”）通过class获取元素

长得像数组，但不是，有长度，有索引值
变量名【索引值】.innerHTML = “更改内容”
可以用array.from（变量名）转换成数组

document.getElementByTagName（“标签名”） 通过标签获取

长得像数组，但不是，有长度，有索引值
变量名【索引值】.innerHTML = “更改内容”
可以用array.from（变量名）转换成数组

document.getElementByName（“name名”）

document.querySelector（“#id或标签或标签.class或.class”）

只返回一个对象，如果有多个相同的只返回遇到的第一个

document.querySelectorAll（“#id或标签或标签.class或.class”）

可返回多个对象

操作元素属性

元素自带属性（原生）
自定义属性

变量.attributes【索引值】，查找属性

操作原生属性
元素.innerHTML=“更改内容”
元素.原生属性（type等）= “更改属性”

操作自定义属性
增加：元素.setAttribute（“属性”，属性值）
获取：元素.getAttribute（“属性”）
删除：元素.removeAttribute（“属性”）
如果自定义属性前面加data-需要使用
获取：元素.dataset
修改增加：元素.dataset.自定义属性=属性
删除：delete 元素.dataset 自定义属性

操作元素文本内容

innerHTML拿到标签内完整内容

innerText拿到标签内文本

不解析html

value表单标签拿到value值

操作元素样式

style 获取行内样式
只能访问行内样式
直接更改样式即可

例：无法访问height

getComputedStyle获取内部样式，外部样式，行内样式

只能获取，不能赋值

操作元素类名

获取class的类名.className
可赋值

获取class的类名.classList（获取显示成成数组）
.classList.add（“增加的类名”）（会自动去重）
.classList.remove（“删除的类名”）

toggle切换类名是否存在
.classList.toggle（“类名”）

DOM节点

元素节点，文本节点，属性节点，document（根节点，最大的节点），注释节点（一段注释）

获取节点的方法

.childNodes获取父元素中所有节点
.children获取父元素中所有标签节点

.firstChild获取父元素中第一个节点
.firstElementChild获取父元素中第一个标签节点

.lastChild获取父元素中最后一个节点
.lastElementChild获取父元素中最后一个标签节点

.previousSibling获取该元素上面的一个节点
.previousElementSibling获取该元素上面的一个标签节点

.nextSibling获取该元素下面的一个节点
.nextElementSibling获取该元素下面的一个标签节点

.parentNode获取该元素的父元素的节点
.parentElement获取该元素的父元素的标签节点

通常是一样的，但.parentElement找不到document节点

.attributes拿到标签内所有属性可加索引值.attributes【索引值】

操作节点

创建一个元素节点
.document.createElement

父元素插入节点
.appendChild（创建的节点）

位置在最后面

在某个元素节点之前插入
.insertBefore（要插入的节点，谁的前面）

删除节点
.removeChild（删除的节点）子元素删除
.remove（删除的节点）整个父元素本身删除

替换节点
.replaceChild（新的节点，老的节点）

克隆节点
.cloneNode（true）克隆后代
.cloneNode（）不可隆后代（默认为false）

节点属性

每一个节点都有不同nodeType

元素节点为1，文本节点为3

.nodeType

遍历所有的元素节点

获取元素尺寸

offset获得宽高为border+padding+content
.offsetWidth
.offsetHeight

获得值为数字类型
box-sizing不影响计算宽高方法border+padding+content
display：none无法拿到宽高值

client获得宽高为padding+content
.clientWidth
.clientHeight

获得值为数字类型
box-sizing不影响计算宽高方法border+padding+content
display：none无法拿到宽高值

获取元素的偏移量

.offsetLeft .offsetTop偏移量

参考值为定位父级，即遇到的第一个有定位的父级，如果父级元素都没有定位，偏移量相对于body

.clientLeft .clientTop偏移量（相对于自身，即边框宽度）

获取可视窗口尺寸（不包含滚动条）

document.documentElement.clientWidth
document.documentElement.clientHeight

初识事件

dom0：
.触发事件=function（）{}
不可以分开创建多个函数任务，会被覆盖

dom2：
.addEventListener（“事件类型”，function（）{ } ）
可以分开复制多份任务，从上到下按照顺序执行

事件解绑

dom0：
.onclick = null

dom2：
.removeEventListener（“事件类型”，函数名）

此时函数应该创建在removeEventListener和addEventListener之外

事件类型

鼠标事件
btn.onclick单机事件

btn.ondblclick双击绑定执行

btn.contextmenu 右键单击（自定义右键菜单）

btn.mousedown/mousemove/mouseup鼠标按下这一刻/鼠标移动在指定区域/鼠标抬起

btn.mouseover/mouseout鼠标移入（对子元素也成立）/鼠标移出

btn.mouseenter鼠标移入（对子元素不产生效果）

键盘事件

window.onkeydown按下键盘/onkeyup抬起键盘

表单事件

input.onfocus获得焦点/onblur失去焦点

input.onchange获取焦点和失去焦点的时候对比内部条件不一样才会触发

username.oninput内容不同就会触发

// 必须创建表单结构

form.submit提交/reset重置

触摸事件（只针对移动端）

box.ontouchstart开始接触

box.ontouchmove开始移动

box.ontouchend松开

事件对象

每一个字符都有keycode

事件对象-鼠标事件

cilentX/cilentY 鼠标所在位置距离浏览器可视窗口的左上角的坐标值

pageX/pageY距离页面文档流的左上角的坐标值

offsetX/offsetY距离触发元素的左上角的坐标值

DOM事件流

标准的dom事件流：

捕获：window=>document=>body=>outer

目标：inner

冒泡：outer=>body=>document=>window

默认情况下，只在冒泡触发回调函数

阻止事件流

evt.stopPropagation（）停止冒泡现象

阻止默认行为

dom0：return false

dom2：evt.preventDefault（）

事件委托

冒泡机制中，点击子元素父元素也会触发相同事件，所以可以直接把子元素的事件委托给父元素来做，用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作