document.querySelector(); 对象
document.querySelectorAll(); 数组
var ul =document.querySelector("ul");
console.log(ul.children)不包括文本节点
console.log(ul.childNodes)文本节点
样式 style
li.style.backgroundcolor="#ccc";错误使用
li.style["background-color"]="#ccc";

属性 attributes 获取官方非属性值
console.log(li.attributes["data-id"]) name获取名字 value获取值
click事件 单击
change 单选、多选状态改变，下拉框选项改变 文本框的值改变
mouseover
moseout
keypress

经典案例 获得鼠标的位置
var div =document.querySelector("div");
var span =document.querySelector("span");
div.onmousemove =function(e){
//获取鼠标位置
// console.log(e.x,e.y)
span.style.top =e.y+"px";
span.style.left =e.x+"px";
}

经典案例 移入显示和移出不显示
for (let i = 0; i < imgs.length; i++) {
imgs[i].onmousemove = function (e){
big.style.top=e.y+10+"px";
big.style.left=e.x+10+"px";
big.src=this.src;
}
imgs[i].onmouseout =function(){//移入显示
big.style.display="none";
}
imgs[i].onmouseenter =function(){//移除不显示
big.style.display="block";
}
}

经典案例 点击变色
var as = document.querySelectorAll("li a");
for (let i = 0; i < as.length; i++) {
as[i].onclick =function (){
for (let j = 0; j < as.length; j++) {
as[j].className="";

}
this.className="active";
var url = this.attributes["data-url"].value//ajax
}
}