DOM（文档对象模型 document object Model）

DOM（文档对象模型 document object Model）

DOM的作用：就是通过JS和HTML标签通信的方式。

document对象下的属性和方法

* getElementById(id) 通过ID获取元素，返回值一定是一个Node节点
* getElementsByTagName(标签名) 通过标签名获取元素，返回值一定是一个NodeList
* querySelectorAll("css选择器") 返回与css选择器相匹配的NodeList
* getElementsByClassName("类名") 通过类名获取元素 

Node节点:Object数据类型，代表着页面中的一个元素。

* innerHTML 设置/返回这个元素的开始标签与结束标签的内容
* className 设置/返回元素的类名
* id 设置/返回元素的id
* getAttribute("属性名") 返回该元素得到某个属性的属性值
* setAttribute("属性名",属性值) 设置某个元素的某个属性所对应的属性值

NodeList:类数组，若干的Node节点组成的类数组。代表很多标签的集合。NodeList和Node节点它们各自的属性和方法独立。

DOM事件

	// 绑定事件
	node.事件名 = function(){
		//事件处理函数/事件句柄

		this 永远都是指向当前触发事件的那个Node节点
	}

事件都有哪些

* onclick 单击事件

写交互效果的套路

1. 明确要操作的元素
2. 获取要操作的元素(有可能是Node,也有可能是NodeList)
3. 明确需要绑定事件的元素，并且为其绑定事件（可能会需要循环）。
4. 检测一下事件有没有绑定成功。
	4.1) 检查绑定事件的元素，是不是一个Node节点
	4.2) 绑定事件的事件名写错了。
	4.3) 没有把js代码放在body结束之前
5.思考当用户触发了事件之后你需要操作哪些元素哪些属性。