Dom
DOM基础
文档对象模型
- Element
- attribute
- text
获取元素节点
-
older
- forms
- links
- achors
- images
-
表单,写表单name，尽量写
-
表单元素
- document.[formName]
-
表单字段（域）
- formElement.[formFieledName]
-
-
old
- getElentById
- getElementByClassName
- getElementByTagName
- gretElenmentByName
-
new
- querySelect
- querySelectAll
-
找亲戚的方法
- node
-
ElementNode
- children
- parentElement
- previousElementsibling
- nextElementSibling
- firstElementchild
- lastElementChild
操作元素节点
-
替换
- replace
-
插入
- appendChild
- insertBefore
-
删除
- removeChild
- remove
-
克隆
- cloneNode
-
创建
- createEelement
- createAttrbute
- createText
属性节点
-
方案一
-
Element[属性名]
- className
- htmlFor
-
-
方案二
-
XXattbute
- get
- set
- remove
- has
-
属性名是什么就是什么
-
-
自定义属性
-
设置
- HTML中加data-XX
-
获取
- js中通过Element.dataset.自定义属性
-
文本节点
- innerText
- innerHTML
样式操作
-
行内样式对象
-
Element.style
- 可读可写
-
-
计算后样式对象
-
computerStyle(element)
-
getcomputerStyle(element).width
- 可读
-
-
-
样式表样式对象//不重要
-
document.styleSheets[].rules[].style;因为使用的数组获取的，所以通过数组下标获取值。
- 可读可写
-
-
object.assigin
DOM事件
了解事件
-
三要素
- 事件源
- 事件类型
- 事件监听器（处理器）
事件的使用
-
注册
- 原生事件-不管
-
自定义事件
- const event = new Event(“事件名称”);
-
绑定
-
dom()
- html
- document.onclick = handler
-
dom2
- document.addEventListener("click",listener);
-
-
触发
- 原生：一般是满足一定交互条件
-
自定义事件：
- element.dispatch(event);
事件流
- 捕获流
- 冒泡流
-
现代DOM流（捕获加冒泡）
- 先捕获在冒泡，中间有一个目标阶段不分先后，需要看自己书写的顺序
事件代理
-
1.找父亲
- 第一个静态父级
-
2.父亲绑定事件
- 3.监听器内部通过event.target过滤
- 4.写代理代码
事件对象
- target
-
键盘
- which
-
鼠标
- pageX
- offsetX
- clientX
-
preventDefault阻止事件
-
dom0:return flase
- element.onleypress = (e)=>flase;不能键盘点击
-
-
stopPropagation
表单事件
- blur
- focus
- input
- change
- submit
- reset