DOM 01（document Object Model)

DOM可以动态的操作文档内容

原理

1：解析文档生成DOM树
2：通过DOM标准接口+编程语言改变文档内容

![Paste_Image.png](http://upload-DOM可以动态的操作文档内容

原理

1：解析文档生成DOM树
2：通过DOM标准接口+编程语言改变文档内容

Paste_Image.png

DOM节点

Paste_Image.png

节点关系

Paste_Image.png

节点类型

![Uploading 1498143037857_230468.jpg . . .]

Paste_Image.png

节点属性

nodeName

Paste_Image.png

nodeValue

Paste_Image.png

nodeType

Paste_Image.png

---

查找元素

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

querySelector() querySelectorAll()

选取的DOM元素的属性

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

获取设置元素

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

---

Paste_Image.png

obj.style=""//直接可以设置 obj.style.color=""//设置获取color值 其他同理

【但是获取实际的值我在谈谈DOM访问元素样式】中提到

还有一个跟别方法
offsetLeft/Top/Width/Height
client/Width/Height
scrollTop/ScrollLeft
ScrollHeight/Width
screenWidth/Height

有兴趣的可以补充这写的区别