目录
一、节点的概念(页面中所有的内容)
1、父级节点/父级元素
obj.parentNode
obj.parentElement
2、子节点/子元素
obj.childNodes 节点比元素多
obj.children
第一个子节点 obj.firstChild
第一个子元素 obj.fristElementChild
最后一个子节点 obj.lastChild
最后一个子元素 obj.lastElementChild
前一个兄弟节点 obj.previousSibling
前一个兄弟元素 obj.previousElementSibling
后一个兄弟节点 obj.nextSibling
后一个兄弟元素 obj.nextElementSibling
//在ie8里面子节点兄弟节点 的获取都变成了元素
//不常用
二、元素的创建
1、document.write("标签的代码及内容")
2、对象.innerHTML = "标签及代码"
3、document.createElement("标签的名字");---返回的是对象
对象.appendChild(obj) //追加子元素
对象.insertBefore(obj,某元素) //插入某元素之前
对象.replaceChild(新元素,老元素) //替换子元素
对象.removeChild(老元素) //删除子元素
三、事件的绑定
1、为一个元素创建多个点击事件
$("#btn").addEventListener("click",函数1,false);------------------------------火狐和谷歌支持,ie8不支持
$("#btn").addEventListener("click",函数2,false);
对象.attachEvent("事件类型",函数)------------------------ie8支持,其他不支持
兼容代码
2、绑定事件的区别
四、事件的解绑
(用什么方式绑定事件,就应该用什么方式解绑事件)
1、第一种方式
$("#id").οnclick=null
2、第二种方式
$("#id").removeEventListener("click",函数,false);----------ie8不支持
3、第三种方式
$("#id").detachEvent("onclick",函数);------------------------ie8支持
解绑兼容代码
五、事件冒泡
多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素事件触发了
那么外面的元素的事件自动触发
阻止事件冒泡
window.event.cancelBubble=true;-------------------ie特有
e.stopPropagation();------------------------------------火狐谷歌支持
六、事件总结
事件有三个阶段:
1、事件捕获阶段
2、事件目标阶段
3、事件冒泡阶段