背景
- Document Object Model(文档对象模型)
- 思路:把html里的各种数据当做对象进行操作
节点
- 把所有html都转换为节点
- 整个文档、元素、元素属性、元素内容、注释等
获取节点
- document.getElementById:通过id获取元素节点
- getElementsByTargetName:通过标签名称获取元素节点
- getElementsByClassName:通过类名获取元素节点
- getElementsByName:通过表单元素的name获取元素节点
- attributes:获取属性节点
- childNodes:获取内容节点
节点属性
- nodeName:节点名称
- nodeValue:节点值
- nodeType:节点类型
- innerHTML:元素的文本内容
- id/value/className:元素属性
样式
- 一个元素节点的style属性即对应的css
事件
- onfocus:焦点
- onmousedown:鼠标点击
- onkeydown:键盘按下
- onclick:点击
- onchange:变化
- onsubmit:提交
- onload:加载
节点关系
创建节点
- createElement:创建元素节点
- createTextNode:创建文本节点
- createAttribute:创建属性节点
删除节点
- removeChild:删除元素节点
- removeAttribute:删除属性节点
- removeChild:删除文本节点
替换节点
- replaceChild:先获取父节点,再通过父节点替换子节点
插入节点
- appendChild:追加节点
- insertBefore:在前方插入节点
常用场景
- js结合HTML DOM
- 实现各种登录、提交时的验证功能