HTML：
getElementById("abc")获取id="abc"的元素getElementsByClassName("abc")获取类名class="abc"的元素，得到结果为一个类数组getELementsByTagName("abc")获取标签名为abc的元素，得到结果为一个类数组getElementsByName("abc")获取属性name="abc"的元素，得到结果为一个类数组HTML5：
querySelector(".class")查询符合条件的元素，且只能获取一个。若符合条件的元素有多个，则取第一个
条件编写与CSS(3)中的选择器类似（所以首先要掌握CSS(3)的选择器知识）
querySelectorAll(".class")查询符合条件的所有元素，得到结果为一个类数组node.classList.item(0)通过item下标获取元素，0表示第一个，1表示第二个，以此类推为当前元素node添加一个类名active
注意：不可以node.classList.add("active java");同时添加两个，只能分两行代码添加
node.classList.remove("active");$(node).removeClass("active");移除当前node元素的类名activenode.classList.toggle("active");$(node).toggleClass("active");切换当前node元素的类名active，即若有active类名，则移除；若没有active类名，则添加node.classList.contains("active");$(node).hasClass("active");判断当前元素node是否包含类名active，返回true或false
1. 自定义属性规范格式：data-*
注意：
（1）必须以data- 开头；
（2）data- 后面至少有一个字符，且尽量不要有特殊符号，不要是纯数字，名称尽量小写；
（3）可以是多个单词用“-”连接，如“data-lang-java”，这是为了对应JS中的camel写法（后面说明）。
2. 设置和读取一个自定义属性值——dataset
在之前的学习中，我们可以使用node.getAttribute("data-name"); 来读取一个自定义属性值，使用node.setAttribute("data-name"); 来设置一个自定义属性值。
HTML5提供了一个对象DOMStringMap的实例dataset，来获取自定义属性。如：
<p data-lang-java="good"></p> <script type="text/javascript"> window.onload = function(){ var a = document.querySelector("p").dataset; console.log(a); } </script>输出结果可以理解为一个对象，因此我们可以用“.属性名”的方式获取属性值，或者是添加属性。如：
<p data-lang-java="good"></p> <script type="text/javascript"> window.onload = function(){ var a = document.querySelector("p"); var b = a.dataset.langJava; a.dataset.langPython = "great"; console.log(b); } </script>在上面的代码中，b的输出结果为“good”，即data-lang-java的属性值；且p的自定义属性中新增了data-lang-python="great"。
需要注意的是，我们在HTML5中书写data-时可用“-”符号将多个单词连接，但是这在JavaScript中是不允许的，因为“-”在JavaScript中是特殊符号。因此我们需要采用camel（骆驼峰）写法来书写data-后面的字符串，如上面代码中JS中的langPython，此时会将langPython转换为HTML5中的data-lang-python。同样的，HTML5中的data-lang-java也会转化为JS中的langJava。
我实现的小米官网Tab切换，实际上所用的js就是上面的一些知识，js部分代码不长，但是由于需要使用html+css进行布局，总的代码非常的长，因此以下我只通过一个简单的“动漫信息面板切换”来进行案例实现的记录，js原理是一模一样的。（如果有大哥大姐想看看我实现的小米tab代码，可以找我拿哈。）
废话不说，代码如下，毕竟知识点我上面已经记录过了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动漫信息面板</title> <style> ul{ list-style: none; } ul,li{ margin:0; padding:0; } .box{ width: 400px; height: 1000px; margin: 0 auto; position: relative; } nav ul{ width: 400px; text-align: center; } nav ul li{ float:left; width:25%; height: 52px; line-height: 52px; cursor: pointer; } nav ul li:hover{ color: #FF6700; border-top: 2px solid #FF6700; } nav ul .active{ color: #FF6700; border-top: 2px solid #FF6700; } article ul li{ display: none; text-align: center; position: absolute; top: 52px; } </style> </head> <body> <div class="box"> <nav> <ul class="title"> <li data-name="onepiece">海贼王</li> <li data-name="naruto">火影忍者</li> <li data-name="reborn">家庭教师</li> <li data-name="giant">进击的巨人</li> </ul> </nav> <article> <ul class="info"> <li id="onepiece"> <img src="onepiece.jpg" width="400px" height="300px" > <h1>作者：尾田荣一郎</h1> </li> <li id="naruto"> <img src="huoying.jpeg" width="400px" height="300px" > <h1>作者：岸本齐史</h1> </li> <li id="reborn"> <img src="reborn.jpg" width="400px" height="300px" > <h1>作者：天野明</h1> </li> <li id="giant"> <img src="jinji.jpg" width="400px" height="300px" > <h1>作者：谏山创</h1> </li> </ul> </article> </div> </body> <script> (function(key){ //获取全部标题的li var titles = document.querySelectorAll(".title li"); //遍历每个标题 for (var i=0; i<titles.length; i++){ //显示默认情况下的信息 if (i == key){ titles[i].classList.add("active"); document.getElementById(titles[i].dataset.name).style.display = "block"; } //点击事件 titles[i].onclick = function(){ //获取当前含active类名的元素,存于active变量 var active = document.querySelector(".active"); //移除该元素的active类名 active.classList.remove("active"); //隐藏该元素的信息 document.getElementById(active.dataset.name).style.display = "none"; //为当前点击的元素添加类名active this.classList.add("active"); //获取当前点击的元素的自定义属性,将其赋给getElementById(),获取对应id的元素,显示其信息 document.getElementById(this.dataset.name).style.display = "block"; } } })(1) </script> </html>需要注意的是：
（1）我们希望我们的代码中JS和HTML5的耦合度（可以理解为关联程度）越低越好，否则若对其中的某一个稍作修改，都有可能会牵涉到另一个的修改。
（2）我们希望能将js代码封装成为一个函数。
