1. DOM
windown→document→html
一切节点都是对象
2. 常用的节点分类
- 元素节点
- 属性节点
- 注释节点
- 文档节点
3.节点选择
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName() ie8 不兼容
document.querySelector('id选择器|class选择器|标签|h5选择器') 如果是对象集 则返回对象集的第一个
document.querySelectorAll() 一个对象集
4. 节点属性
nodeType 节点类型
modeName 节点名称
nodeValue 节点值
| 节点类型 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名称 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
| 注释节点 | 8 | #comment | 注释内容 |
| 文档节点 | 9 | #document |
5. 节点之间的相互关系
parentNode 父节点 单个
childNode 子节点 集合
firstChild 第一个子节点 单个 （firstElementChild - ie8 不兼容）
lastChild 最后一个节点 单个
nextSibling 下一个兄弟节点 单个
previousSibling 上一个兄弟节点 单个
这些属性用来做曾 删
6. DOM操作流程
- 创建元素节点
let obj = document.cteateElement("元素节点 如div")
- 属性节点操作
obj.属性名 = 属性值 (obj.name = 'checkbox')
obj.setAttribute("属性名": "属性值")
obj.getAttribute("属性名")
obj.removeAttribute("属性名")
- 创建文本节点
obj.innerHtml = "<div>123</div>"
document.createTextNode("文本")
- 追加节点
父节点.appendChild(obj) 插入元素到最后
父节点.insertBefore(obj) 插入元素到最前
- 删除节点
父节点.removeChild(obj)
7. 样式操作
赋值
obj.style.fontSize = "16px"
获取
ie: obj.cuttentStyle.fontSize
非ie: getComputedStyle(元素, null).fontSize
8. document文档
document.documentElement 标准
document.body 非标准模式 混合模式
9. 位置属性
obj.offsetWidth = 包含内外边距
obj.offestHeight = 包含内外边距
obj.offestTop = 相对父元素上边框的距离
obj.offsetLeft = 相对父元素左边框的距离
10. 其他DOM的API
- getClientRects。点击查看参考
