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.思考当用户触发了事件之后你需要操作哪些元素哪些属性。