文档对象模型

DOM，全称Document Object Model文档对象模型，JS中通过DOM来对HTMl文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。

文档：文档表示就是整个的HTML网页文档。

对象：对象表示将网页中的每一个部分都转换为了一个对象。

模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点：节点Node，是是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点，虽然都是节点，但是实际上他们的具体类型是不同的。

常用节点分为四类：文档节点：整个HTML文档，（文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点）元素节点：HTML文档中的HTML标签，（HTML中的各种标签都是元素节点，这也是我们最常用的一个节点）属性节点：元素的属性，（文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点）文本节点：HTML标签中的文本内容。（属性节点表示的是标签中的一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分）

geElementById方法：

//在html中创建一个按钮。

var btn = document.getElementById(“btn”)//从HTML中获取到btn

btn.onclick = function(){//给btn添加点击事件

alert(“hello world”);//弹窗

}

除了getElementById方法以外，还有getElementsByTagName() 通过标签名获取一组元素节点对象，getElementsByName() 通过name属性获取一组元素节点对象，getElementsByClassName() 通过标类名获取一组元素节点对象。

element.clientHeight、element.clientWidth 这两个属性可以获取元素的可见度和高度，这些属性都是不带px，返回的都是一个数字，可以直接进行计算，会获取元素的高度和宽度，包括内容区和内边距。这些属性都是只读的，不能修改。

element.offsetLeft 当前元素相对应其定位元素的水平偏移量element.offsetTop   当前元素相对应其定位元素的垂直偏移量