元素查找:
回顾:
1.节点 元素
2.节点属性 childNodes parnetNode children previousSibling nextSibling
3.节点集合 childNodes[索引]
4.节点属性操作
节点属性赋值:
对象.属性名=值 例如:o.src='1.jpg'
对象[属性名]=值
对象.setAttribute(属性名,属性值)
节点属性取值:
对象.属性名
对象[属性名]
对象.getAttribute(属性名)
5.样式的操作
样式的修改
对象.style.样式名=值;
样式的获取
对象.style.样式名
window.getComputedStyle(对象,null)
offset-名称 只读
6.节点的查找
(1)根据ID查找元素 返回值
document.getElementById 节点对象或者null
(2)根据标签名查找节点
document.getElementsByTagName HTMLCollection 在全局中查找
obj.getElementsByTagName HTMLCollection 在指定节点中查找
(3)根据class查找元素
document.getElementsByClassName(cls) HTMLCollection
(4)根据名称查找节点对象
document.getElementsByName NodeList
事件对象:
事件对象:在事件触发时,由浏览器传递给事件的
接收事件对象:在事件处理函数内接收
type
target
clientX pageX
clientY pageY
事件对象兼容性:e=e||window.event;
举例:
document.getElementById('btn').onmouseover=function(e){
// console.log(e);
// alert(e);
// alert(window.event.clientX); // IE浏览器
e=e||window.event; //事件对象兼容性写法
};
事件流:
事件流:事件传递
冒泡:事件的传递由最具体的元素,层层向外传递,直到最外层元素 现代主流浏览器事件传递机制
捕获:y事件的传递由最外层,向内层层传递,直到最具体元素
阻止事件流(冒泡):
stopPropagation() 谷歌和火狐
cancelBubble=true; IE
例如:
为三个div添加点击事件
document.getElementById('box1').onclick=function () {
alert('div1');
};
document.getElementById('box2').onclick=function () {
alert('div2');
};
document.getElementById('box3').onclick=function (e) {
// e=e||window.event;
alert('div3');
// e.stopPropagation();//阻止事件冒泡
// e.cancelBubble=true;//IE 阻止事件冒泡
// if(e!=undefined){
// e.stopPropagation();
// }else{
// window.event.cancelBubble=true;
// }
e?e.stopPropagation():window.event.cancelBubble=true;//兼容性写法
};