元素获取
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>
