JS 中的 # DOM 操作

DOM 操作

一、获取元素

1.获取非常规元素

• html ：document.documentElement
• head ：document.head
• body ：document.body

2.获取常规元素

2.1 根据 id 获取元素

• 语法：document.getElementById（‘元素 id 名’）
• 返回值
  • 页面上有 id 对于的元素，返回这个元素
  • 没有 id 对于的元素，返回 null

2.2 根据 类名 获取元素

• 语法：document.getElementByClassName（‘元素类名’）
• 返回值：** 必然是一个伪数组 **
  • 如果页面上有 类名 对于的元素，那儿有多少取多少，放在伪数组里面返回
  • 如果页面上没有 类名 对于的元素，那么就返回一个空的伪数组

2.3 根据 标签名 获取元素

• 语法：document.getElementByTagName（‘标签名’）
• 返回值：** 必然是一个伪数组 **
  • 如果页面上有 标签名 对于的元素，那么有多少取多少，放在伪数组李返回
  • 如果页面上没有 标签名 对于的元素，就返回一个空的伪数组

2.4 根据选择器获取 ** 一个 ** 标签

• 语法：document.querySelector（‘选择器’）
• 返回值：
  • 如果页面上有 选择器 对应的元素，就返回选择器对应的第一个元素
  • 如果页面上没有 选择器 对应的元素，就返回 null

2.5 根据选择器获取 ** 一组 ** 标签

• 语法：document.querySelectorAll（‘选择器’）
• 返回值：
  • 如果页面上有 选择器 对应的元素，有多少获取多少，放在一个位数字里返回
  • 如果页面没有 选择器 对应的元素，返回一个空的伪数组

二、操作元素属性

1.操作原生属性

• 语法：元素.属性名 = 属性值
• 注意：遇到布尔值类型属性，可以使用 true 或者 false 赋值

2.操作自定义属性（非 H5 自定义属性）

2.1 设置

• 语法：元素.setAttribute（key，value）

2.2 删除

• 语法：元素.removeAttribute（key）

2.3 获取

• 语法：元素.getAttribute（key）
• 返回值：该自定义属性的值
• 注意：可以操作原生属性，但是不推荐，也不要用它去删除原生属性

3.操作 H5 自定义属性

• 每一个元素节点 身上有一个自带的属性，叫做 dataset
• 是一个类似于对象的数据结构，存储的就是改标签身上的所有 H5 自定义属性
• 对于 H5 自定义属性的操作，就是对于 dataset 这个数据结构的操作（同对象操作语法）

三、操作元素样式

1.获取元素行内样式

• 语法：元素.style.样式名

2.获取元素非行内样式

• 语法：window0getComputedStyle（要获取样式的元素）。样式名

3.设置元素样式（只能设置 h 行内样式）

• 语法：元素.style.样式名= 样式值

四、操作元素类名

calssName

• 就是原生属性的操作
• 因为 JS 内又一个关键字叫做 class，为了避开改名叫做 calssName
• 注意：类名的值是一个字符串没错，但是字符串中可能包含多个类型

classList

• 每一个 元素节点 身上自带一个属性叫做 classList
• 是一个类似数组的数据结构，存放的是该元素的所有类名
• 增删改查都是对 classList 的操作，给出专门的 api
• 增：元素.classList.add（类名）
• 删：元素.calssList.remove（类名）
• 切换：元素.classList.toggle（类名）
  • 原先有就删除，没有就新增

五、操作元素文本内容

1.innerText

• 读：
  • 语法：元素.innerText
  • 得到：该元素内所有文本内容
• 写：
  • 语法：元素.innerText = ‘值’
  • 作用：完全覆盖式的书写改标签的文本内容
  • 注意：没有办法识别解析 html 格式字符串

2.innerHTML

• 读：
  • 语法：元素.innerHTML
  • 得到：该元素内的所有内容（包含超文本），以一个 html 合适字符串的形式返回
• 写：
  • 语法：元素.innerHTML = ‘值’
  • 作用：完全覆盖式的书写标签内的超文本内容
  • 注意：可以识别解析 html 格式字符串

3.value

• 读：
  • 语法：表单元素.value
  • 得到：该表单元素的 value 值
• 写：
  • 语法：表单元素.value = ‘值’
  • 作用：设置表单元素的 value 值

六、获取元素尺寸

1.语法第一套

• 元素.offsetWidth
  • 获取元素的 内容 + padding + border 区域的内容
• 元素.offsetHeight
  • 获取元素的 内容 + padding + border 区域的内容
• 注意：不管盒模型是什么，区域都不变

2.语法第二套

• 元素.clientWidth
  • 获取的是元素 内容 + padding 区域的宽度
• 元素.clientHeight
  • 获取的是元素 内容 + padding 区域的高度
• 注意：不管盒模型是什么，区域不变

七、获取元素的偏移量

1.获取元素偏移量参考元素

• 语法：元素.offsetParent
• 得到：该元素的偏移量参考父级
  • 就是该元素的定位父级
  • 如果到 bady 都没有定位父级，那么这里的 offserParent 就是 body 元素

2.语法第一套

• 语法：
  • 元素.offsetLeft
    • 获取元素相对于 offectParent 的左侧距离
  • 元素.offsetTop
    • 获取元素相对于 offsetParent 的上方距离

3.语法第二套

• 语法：
  • 元素.clientLeft
    • 元素（内容 + padding）相对于该元素 border 左边的尺寸
  • 元素.clientTop
    • 元素（内容 + padding）相对于该元素 border 上边的尺寸

八、获取可视窗口尺寸

• BOM 级别的获取，包含滚动条的尺寸
  • innerWidth
  • innerHeight
• DOM 级别的获取，不包含滚动条的尺寸
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

九、鼠标事件

1.click 左键单击

• 绑定：元素.onclick

2.dblclick 左键双击

• 绑定：元素.ondbclick

3.contextmenu 右键单击

• 绑定：元素.oncontextmenu

4.mousedown 鼠标按键按下

• 绑定：元素.onmousedown

5.mouseup 鼠标按键抬起

• 绑定：元素.onmouseup

6.mousemove 鼠标移动

• 绑定：元素.onmousemove

7.mouseover 鼠标移入

• 绑定：元素.onmouseover

• 在移入后代元素的时候 也会触发

8.mouseout 鼠标移出

• 绑定：元素.onmouseput

• 在移入后代元素的时候 也会触发

9.mouseenter 鼠标移入

• 绑定：元素.onmouseenter

• 在移入后代元素的时候 也会触发

10.mouseleave 鼠标移出

• 绑定：元素.onmouseleave

• 在移入后代元素的时候 也会触发

十、键盘事件

1.keydown

• 按键按下事件

2.keyup

• 键盘抬起事件

3.keypress

• 键盘键入事件
• 可以真实键入内容 和 回车才会触发

十一、表单事件

1.blur

• 失焦

2.focus

• 聚焦

3.input

• 输入

4.change

• 改变
• 失焦时如果内容和聚焦时不一样才会触发

5.reset

• 重置
• 需要绑定给 form 标签
• 当点击 reset 按钮的时候，会触发 form 标签的 重置行为

6.submit

• 提交
• 需要绑定给 form 标签
• 当点击 submit 按钮的时候，会触发 form 标签的 提交行为

十二、事件绑定

• 在 JS 内有两种时间绑定方式

1.DOM 0 级 事件绑定

• 使用 on 语法进行事件绑定

• 语法：事件源.on 事件类型 = 时间处理函数

• 特点：同一个事件源的同一个事件类型只能绑定一个事件处理函数

2.BOM 2 级 事件绑定（时间侦听器/时间监听器）

• 标准浏览器
  • 语法：事件源.addEventListener（‘事件类型’，事件处理函数）
  • 特点：同一个事件源的同一个事件类型可以绑定多个事件处理函数，顺序绑定顺序执行
• IE 低版本
  • 语法：事件源.attachEvebt（‘on 事件类型’，事件处理函数）
  • 特点：同一个事件源的同一个事件类型可以绑定多个事件处理函数，顺序绑定倒序执行

十三、事件解绑

1.DOM 0 级 事件解绑

• 语法：事件源.on 事件类型 = null
• 因为 复制符号 覆盖的原因，可以解绑

2.DOM 2 级 事件解绑

• 语法：事件源.removeEventListener（‘事件类型’，要解绑的事件处理函数）
• 注意：DOM 2 级 事件你要想解绑，那么在绑定的时候，需要把函数单独书写，一函数名的方式绑定

DOM 2 级 事件解绑 低版本 IE

• 语法：事件源.detachEvevt（‘on 事件类型’，要解绑的时间处理函数）

十四、事件对象内的信息—鼠标事件

1.client 一组

• 语法：
  • 事件对象.clientX
  • 事件对象.clientY
• 鼠标光标相对于浏览器可是窗口左上角的坐标位置

2.page 一组

• 语法：
  • 事件对象.pageX
  • 事件对象.pageY
• 鼠标光标对于文档流左上角的坐标位置

3.offset 一组

• 语法：
  • 事件对象.offsetX
  • 事件对象.offsetY
• 鼠标光标相对于 触发事件元素 左上角的坐标位置
• 鼠标光标相对于 事件目标 左上角的坐标位置

十五、事件对象内的信息 — 键盘事件

1.keyCode

• 语法：事件对象.keyCode
• 得到：一个编码，每一个按键有一个自主的独立编码

2.组合按键

• 每一个键盘事件对象内有四个信息
  • altKey
  • ctrlKey
  • shiftKey
  • metaKey（win：win 键，mac：command）
• 以上四个键的值都是 布尔值，true 表示按下，false 表示没有按下

十六、创建节点

1.创建元素节点

• 语法：
  • document.createElement(‘标签名’)
• 返回值：
  • 一个呗创建出来的标签
• 注意：
  • 可以自定义标签名

2.创建文本标签

• 语法：
  • document.createTextNode(‘文本内容’)
• 返回值：
  • 一个文本节点

十七、插入节点

1.oppendChild()

• 语法：
  • 父节点.appendChild(子节点)
• 作用：
  • 把子节点插入到父节点内部，并且排列在最后一个的位置

2.insertBefore()

• 语法：
  • 父节点.insertBefore(子节点，谁前面)

十八、删除节点

1.removeChild()

• 语法：
  • 父节点.removeChild(子节点)
• 作用：
  • 把子节点从父节点内移除

2.remove()

• 语法：
  • 节点.remove()
• 作用：
  • 把该节点自己干掉

十九、替换节点

replaceChild()

• 语法：
  • 父节点.replaceChild(换上节点，换下节点)
• 作用：
  • 在父节点内使用 换上节点 替换掉 换下节点

二十、克隆节点

cloneNode()

• 语法：
  • 节点.cloneCode(参数)
    • 参数默认是 false：不克隆后代
    • 参数选填是 true：克隆后代节点
• 作用：
  • 把该节点赋值一份一模一样的出来