DOM-节点操作
节点操作
-
本质上针对标签本身的增删查
-
总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些
-
查
-
返回的都是dom对象
-
查找父级: 子元素.parentNode
- 查找最近的父级元素，返回是dom元素
-
查找子集: 父元素.children
-
伪数组
- 遍历,不能使用forEach
-
-
兄弟
-
nextElementSibling
- 下一个兄弟元素
-
previousElementSibling
- 上一个兄弟元素
-
-
节点-增
-
创建新节点
- let result = document.createElement(标签名称)
-
追加节点
-
parent.appendChild(child)
- 将child的元素添加到parent元素里面去(最后面)
- append：追加，都是在最后面追加
-
parent.insertBofore(child, refChild)
-
将child元素添加到refChild的前面去
- ref：相对引用参照
-
如果refChild元素获取不到, 会默认以appendChild形式添加
-
一定要传递第二个参数，否则报错
-
-
追加的节点可以是新创建的 也可以是页面上已经存在 (移动)
-
-
克隆节点
-
模板元素.cloneNode(布尔值)
-
false: 浅拷贝
- 只拷贝元素结构
-
true: 深拷贝
- 拷贝元素结构及内容
-
用于需要创建一个复杂的标签
- 前提: 页面上有一个模板节点
-
-
删除节点
- parent.removeChild(child)
日期对象
-
-
获取日期对象
- new Date()
-
-
-
获取日期对象的每一个部分
-
getFullYear()
- 年
-
getMonth() + 1
- 月
-
getDate()
- 日期
-
getHours()
- 时
-
getMinutes()
- 分
-
getSeconds()
- 秒
-
getDay()
- 星期几
-
-
-
补0函数的制作
- 将小于10的数值连上一个字符串的0
-
DOM-事件高级
事件对象
-
获取事件对象: 在事件处理函数中里面接受一个形参即可
-
按键事件常用属性
-
e.key
-
keyup
- 获取的是当前这一次的value
-
keydown
- 获取的value是上一次的value
-
注意： 不建议再使用 keyCode
-
-
e.which
- 键码
-
-
单击事件常见属性
-
e.clientX/e.clientY
- 鼠标单击位置参照视口的坐标值
-
e.offsetX/e.offsetY
- 鼠标单击位置参照元素左上角的坐标值
-
e.screenX/e.screenY
- 鼠标单击位置参照屏幕左上角的坐标值
-
-
e.target
- 当前真正触发事件的元素对象
事件流
-
事件流
- 过程: 事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流
- 实际工作都是使用事件冒泡为主
-
事件捕获
-
概念: 从DOM的根元素开始去执行对应的事件 (从外到里)
-
捕获机制必须使用事件监听的形式注册
-
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
- 第三个参数为true:捕获阶段触发事件
- false代表冒泡阶段触发事件-默认值
-
-
-
事件冒泡
-
概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
-
事件冒泡的必要性
-
如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行
-
事件委托
- 自己不注册事件,将对应的事件注册给祖先元素
- 减少事件的注册,提高效率
- e.target => 当前点击的那个元素
-
-
阻止事件冒泡
-
- 先要明确那一块区域不能冒泡
-
- 需要阻止什么事件传递就给这块区域的最大盒子注册该事件
-
- 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()
-
-
-
阻止冒泡和默认行为
-
e.stopPropagation()
- 阻止事件冒泡
-
e.preventDefault()
- 链接的跳转
- 表单域跳转
-
-
事件注册的两种方式区别
-
传统on注册
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
-
事件监听注册
-
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
-
后面注册的事件不会覆盖前面注册的事件(同一个事件)
-
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
-
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
-
-
-
mouseover和 mouseenter的区别
事件委托
-
优点
- 减少事件的注册，只需要注册化父容器
- 可以为已存在和未来的元素注册事件，注册一次，现在未来通用
-
原理：
- 利用冒泡
-
使用场景：动态的渲染的元素的事件注册使用委托，动态渲染的元素的事件只能使用委托
- 开发经验 - 如果一个业务需要某个值才能进行，我们一般有两种方式来处理 - 如果可以传递参数就传递参数 - 先存储再获取 - 存储在那里 - 如何取值方便来决定 - 存储什么 - 基于业务需求 - 如何获取
