DOM事件基本样式：

JS部分：

<script>
window.onload=function(){
//元素dom
// document.getElementById();
// document.getElementsByClassName();
// document.getElementsByTagName();
// document.getElementsByName();

// document.querySelector();对象
// document.querySelectorAll();数组

// var li=document.querySelector("#li1");
// li.parentElement.style.color="red";
// console.log(li.parentElement); null
// console.log(li.parentNode);文档节点 #document

// var ul=document.querySelector("ul");
// ul.childNodes 文本节点
// ul.children 获取元素 不包括文本节点
// ul.childNodes

//兄弟节点
// var li=document.querySelector("#li1");
// li.nextElementSibling();获取下一个元素节点
// li.previousElementSibling;获取上一个元素节点
// li.previousSibling; #text 文本节点
// li.nextSibling(); #text 文本节点


//样式
// var li=document.querySelector("#li1");
// li.style.color="red";
// li.style.background-color="#ccc";
// li.style.backgroundColor="#ccc"; 驼峰命名法
// li.style.["background-color"]="#ccc";数组命名法

//属性 attributes 属性返回指定节点属性的集合
// console.log(li.id);
// console.log(li.className);
// console.log(li.attributes["data-id"]); 获取属性
// console.log(li.attributes["data-id"].value); 获取属性值
// console.log(li.attributes["data-id"].name); 获取属性名

//*click 点击
//*change 改变 单选，多选状态改变的时候 下拉框选项改变的时候 文本框的值改变的时候 会触发
//*mouseover 鼠标事件
//*mouseout
//keydown 键盘事件
//*keypress
//keyup

// var btn=document.querySelector("button");
// btn.onclick=function(){
// // console.log(this.value); 交互控件的值
// }
// var li=document.querySelector("#li1");
// li.onclick=function(){
// // console.log(this.innerText); 获取text
// // console.log(this.innerHTML); 获取html
// // console.log(this.outerHTML);含有本身标签
// }

var select=document.querySelector("select");
// select.onclick=function(){
// conlose.log(this.value);
// }
select.onchange=function(){
console.log(this.value);
}
}
</script>


HTML部分：

<!-- <ul>
<li id="li1" class="li" data-id="0">列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul> -->
<!-- <button value="click">单击</button> -->
<!-- size="1" 默认是1 小于1 显示至少是1个
size="1" multiple 多选
-->
<select name="" id="">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>


鼠标动画代码段：

<style>
body{
position: relative;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
span{
position: absolute;
top: 10px;
left: 10px;
}
</style>
<script>
window.onload=function () {
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-20+"px";
span.style.left=e.x+"px";
}
}
</script>

<div></div>
<span>这是一段文字</span>


选项卡代码段：

样式：
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
ul li{
display: inline-block;
height: 20px;
width: 60px;
}
ul li a{
display: block;
text-align: center;
background-color: #ccc;
}
.active{
background-color: yellow;
}
.content{
width: 188px;
height: 200px;
border: 1px solid #ccc;
}
</style>

JS：
<script>
window.onload=function(){
var as=document.querySelectorAll("li a");
for (var i =0 ;i < as.length; i++) {
as[i].onclick=function(){
for (var j =0; j < as.length; j++) {
as[j].className="";
}
this.className="active";

//ajax
var url=this.attributes["data-url"].value;
}
}
}
</script>

HTML:
<ul>
<li><a href="#" class="active" data-url="http://a">列表1</a></li>
<li><a href="#" data-url="http://b">列表2</a></li>
<li><a href="#" data-url="http://c">列表3</a></li>
</ul>
<div class="content">

</div>