前端学习之DOM基础的总结
最近在整理之前学习的DOM笔记,现在把最近学习的总结分享一下,大家相互学习交流!
DOM基础
-
文档对象模型
-
element
-
attribute
-
text
-
-
获取元素节点
-
old
-
getElementByid
-
getElementsByClassname
-
getElementsByTagName
-
getElementsByName
-
-
new
-
querySelector
-
querySelectorAll
-
-
表单
-
表单元素
-
document.[formName]
-
-
表单字段
-
formelement.[ormFieledName]
-
-
-
找亲戚
-
node
-
elementNode
-
children
-
parentElement
-
previousElementSibling
-
nextElement
-
firstElementChild
-
lastElementChild
-
-
-
-
操作节点
-
插入节点
-
appendChild
-
insertBefore
-
-
替换
-
replaceChild
-
-
删除
-
removeChild
-
remove
-
-
创建
-
createElement
-
-
克隆
-
cloneNode //浅克隆 (true深克隆)
-
-
-
属性节点
-
方案1:element[属性名]
-
方案2:xxAttribute
-
get
-
set
-
remove
-
has
-
-
自定义属性
-
设置是在HTML中加data-
-
获取是element.dataset自定义属性名
-
-
-
文本节点
-
innerHTML
-
innerText
-
-
样式操作
-
行内样式对象 element.style
-
计算后样式对象 computedStyle(element)
-
Object.assign
-
DOM事件
三要素:
-
事件源
-
事件类型
-
事件处理函数
事件的使用:
-
注册 不用管
-
原生事件
-
自定义事件 const event=new Event("事件名称")
-
-
绑定
-
dom0
-
html
-
document.onclick=handler
-
-
dom2
-
document.addEventListener("click",listener)
-
-
-
触发
-
原生:一般是满足一般交互条件
-
自定义事件 element.dispatch(event);
-
事件流
-
捕获
-
冒泡流
-
现代DOM流 前两种的结合
-
事件代理(没有事件流就没有事件代理)
-
找父亲 第一个静态父级
-
父亲绑事件
-
监听器内部通过event.target过滤
-
写代理代码
事件对象
-
target
-
键盘 which
-
鼠标
-
offsetX
-
pageX
-
clientX
-
-
preventDefault
-
stopPropagation
表单事件
-
blur
-
focus
-
input
-
change
-
submit
-
reset