獲取元素

document.getElementsByClassName (‘class‘); 
//通過類名獲取元素，以偽數組形式存在。

document.querySelector(‘selector‘);
//通過CSS選擇器獲取元素，符合匹配條件的第1個元素。

document.querySelectorAll(‘selector‘); 
//通過CSS選擇器獲取元素，以偽數組形式存在。

類名操作

Node.classList.add(‘class‘); 
//添加class

Node.classList.remove(‘class‘); 
//移除class

Node.classList.toggle(
 
‘class‘); 
//切換class，有則移除，無則添加

Node.classList.contains(‘class‘); 
//檢測是否存在class

自定義屬性

<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以對象形式存在的，當我們為同一個DOM節點指定了多個自定義屬性時，
  Node.dataset則存儲了所有的自定義屬性的值。
  */
var demo = document.querySelector(反饋);
//獲取
//註：當我們如下格式設置時，則需要以駝峰格式才能正確獲取
 

    <!--10. dom上的屬性的定義 不支持大寫 寫了也轉換成小寫-->
var name = demo.dataset[‘myName‘];
var age = demo.dataset[‘age‘];
//設置
demo.dataset[‘name‘] = ‘web developer‘;
<script/>

小栗子:

使用classList和dataset實現tab切換

JavaScript 之 dom擴展