<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//1.获取元素选择器的方法
document.getElementById();
document.getElementsByClassName();
document.getElementsByName();
document.getElementsByTagName();
//解决方法：
document.querySelector();
document.querySelectorAll();
//2.元素节点选择器兼容性
firstChild;
lastChild;
previousSibling;
nextSibling;
//firstChild与lastChild 兼容Ie6,7,8 返回指定节点的首个子节点与返回指定节点的最后一个子节点
//firstElementChild与lastElementChild 不兼容低版本的浏览器
//兼容的写法：
var first = e.firstElementChild||e.firstChild;
var last = e.lastElementChild||e.lastChild;
var previous = e.previousSibling ||e.previousElementSibling;
var next = e.nextSibling || e.nextElementSibling;
//3.触发事件对象
//高级浏览器：存储于浏览器中
//IE：window.event
var e = e || window.event;
//产生事件的源
var srcElement = e.srcElement;
if (!srcElement) {
srcElement = e.target;
}
//4.event.x,event.y[IE]和event.pageX,event.pageY
// IE中取鼠标点击的绝对位置，使用event对象的event.x和event.y
// 高级浏览器中取鼠标点击的绝对位置，使用event对象的event.pageX和event.pageY
//5.获取css样式对象
// IE8及以下：
var cssStyle = e.currentStyle || window.getComputedStyle(e)；
//6.事件绑定
//IE中最顶层元素是document;
//高级浏览器是window
//7.事件监听
// 高级浏览器：
addEventListener;//第三个参数如果为true，绑定到捕获阶段，false则绑定到冒泡阶段
removeEventListener;
// IE：
element.attachEvent();//只有两个参数，不能绑定到捕获阶段
detatchEvent();
// 8.阻止冒泡
// 高级浏览器：
e.stopPropagation();
//IE8及以下：
window.event.cancelBubble = true;
// 9.IE:改变原标签特性;高级：阻止默认行为
e.returnValue = false;
return false;
e.preventDefault();
</script>
</body>
</html>
