元素获取
1、document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。
类名操作
1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
自定义属性
1、自定义属性格式：data-*=””，例如data-info=”informant”。
2、自定义属性获取：上例，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值informant
3、Node.dataset是以类对象形式存在的当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name=”itcast”，获取Node.dataset[‘myName’]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} div {
width: 400px;
height: 600px;
margin: 100px auto;
} nav li {
width: 100px;
height: 30px;
list-style: none;
float: left;
background-color: #cccccc;
text-align: center;
font: 400 14px/30px "simsun";
cursor: pointer;
} .current {
background-color: yellow;
} section {
width: 400px;
height: 500px;
font: 700 40px/500px "simsun";
text-align: center;
background-color: blue;
display: none;
} .show {
display: block;
}
</style>
</head>
<body>
<div>
<nav>
<ul>
<li data-cont="shine" class="current">阳光</li>
<li data-cont="beach">沙滩</li>
<li data-cont="cacti">仙人掌</li>
<li data-cont="captain">老船长</li>
</ul>
</nav>
<section id="shine" class="show">阳光</section>
<section id="beach">沙滩</section>
<section id="cacti">仙人掌</section>
<section id="captain">老船长</section>
</div>
<script>
var liNavArr = document.querySelectorAll("nav li");
for (var i = 0; i < liNavArr.length; i++) {
liNavArr[i].onclick = function (ev) {
var li = document.querySelector(".current");
li.classList.remove("current");
this.classList.add("current");
var id = this.dataset["cont"];
var oldSec = document.querySelector(".show");
oldSec.classList.remove("show");
var curSec = document.querySelector("#" + id);
curSec.classList.add("show");
}
}
</script>
</body>
</html>
