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