DOM標准
（一）核心DOM
可以操作一切結構化文檔的API，包括HTML和XML，核心DOM是萬能的，但又是繁瑣的。
（二）HTML DOM
專門操作HTML文檔的簡化版DOM API，僅對常用的復雜的API進行了簡化，HTML DOM不是萬能的，但更加簡單。
注意：在開發中先使用簡單的，簡單的不行再使用復雜的進行補充，以實現效果為目標。
自定義屬性的操作
一、獲取屬性值
element.屬性 獲取屬性值
element.getAttribute('屬性'); 獲取自定義屬性（我們自己添加的屬性）
區別：
element.屬性; 獲取元素內置屬性（元素本身自帶的屬性）
element.getAttribute('屬性'); 主要獲得自定義的屬性（標准）程序員自定義的屬性
注意：
class是保留關鍵字，但是在element.getAttribute('屬性'); 方法中可以直接使用；element.屬性 寫法則需要使用className代替
實例：
獲取div元素中的自帶屬性和自定義屬性
1 <body> 2 <div class="first" index="ww"></div> 3 <script> 4 var div = document.querySelector('div'); 5 //element.屬性 獲取內置屬性（元素本身自帶的屬性） 6 console.log(div.className); 7 //element.getAttribute('屬性') 獲得自定義屬性 8 console.log(div.getAttribute('index')); 9 console.log(div.getAttribute('class')); 10 </script> 11 </body> 12 </html>
二、設置屬性值
element.屬性 = '值'; 設置內置屬性值
element.setAttribute('屬性','值'); 主要針對自定義屬性
實例：
<body>
<div class="first" index="ww" id='ss'></div>
<script>
var div = document.querySelector('div'); console.log(111111); // element.屬性 = ‘值’
div.id = 'box'; div.className = 'navs'; //element.setAttribute('屬性名','值')
div.setAttribute('index','111'); div.setAttribute('class','footer'); </script>
</body>
三、移除屬性
element.removeAttribute("屬性名")； 移除指定的屬性
實例：
<body>
<div class="first" index="ww" id='ss'></div>
<script>
var div = document.querySelector('div'); div.removeAttribute('index'); </script>
</body>
四、判斷是否包含指定的屬性
element.hasAttribute("屬性名"); 判斷元素里面有沒有對應的屬性名
結果會返回布爾類型的值，true或false
實例：
<body>
<div class="first" index="ww" id='ss'></div>
<script>
var div = document.querySelector('div'); div.removeAttribute('index'); console.log(div.hasAttribute('index')); console.log(div.hasAttribute('class')); </script>
</body>
五、HTML5自定義屬性
自定義屬性的目的：是為了保存和使用數據，有些數據可以保存到頁面中而不用保存到數據庫中
自定義屬性獲取是通過 getAttribute('屬性') 方法獲取
但是有些自定義屬性很容易引起歧義，不容易判斷到底是元素內部的屬性還是自定義屬性
H5中為我們新增了標准
（一）設置H5自定義屬性
H5中規定自定義屬性需要以 data- 開頭做屬性名並且賦值
例如：<div data-index="ww" ></div>
也可以使用JS設置新的自定義屬性
例如：element.setAttribute('data-index','111');
（二）獲取H5自定義屬性
1、兼容性較好的獲取方法
getAttribute('屬性')
2、H5新增方法（從IE11才開始支持，兼容性較差）
element.dataset.屬性;
element.dataset[ '屬性' ];
dataset 可以理解成 集合 的意思，獲得所有以 data-開頭的 自定義屬性，data-開頭的自定義屬性的集合
注意：如果自定義屬性里面有多個 - 連接的屬性名稱，使用H5新增方法獲取的時候需要采用 駝峰命名法
實例：
1 <body>
2 <div data-index="ww" data-time='20' data-list-name='name'></div>
3 <script>
4 var div = document.querySelector('div'); 5 console.log(div.getAttribute('data-list-name')); 6 //H5新增獲取屬性的方法
7 console.log(div.dataset); 8 console.log(div.dataset.index); 9 console.log(div.dataset['index']); 10 console.log(div.dataset.listName); 11 console.log(div.dataset['listName']); 12 </script>
13 </body>
