【笔记】DOM操作总结

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操作流程

1. 创建元素节点

let obj =  document.cteateElement("元素节点  如div")

2. 属性节点操作

obj.属性名  = 属性值  (obj.name = 'checkbox')
obj.setAttribute("属性名": "属性值")
obj.getAttribute("属性名")  
obj.removeAttribute("属性名")

3. 创建文本节点

obj.innerHtml = "<div>123</div>"
document.createTextNode("文本")  

4. 追加节点

父节点.appendChild(obj) 插入元素到最后  
父节点.insertBefore(obj)  插入元素到最前  

5. 删除节点

父节点.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

1. getClientRects。点击查看参考