固有屬性Properties ：元素創建是被自動綁定的一系列屬性，可以通過 對象名.屬性名 來訪問
自定義屬性attributes：不能通過 對象名.屬性名來訪問，需要通過對象名.attributes來訪問，返回一個類數組對象namedNodeMap。
myReady(function(){
var content = document.getElementById("content");
console.log(content.id);
console.log(content.className);
console.log(content.xxx);
});
<!DOCTYPE html>
<html>
<head>
<title>練習網頁</title>
<script src='domReady.js'></script>
<script type="text/javascript">
myReady(function(){
var content = document.getElementById("content");
console.log(content.attributes);
});
</script>
</head><body>
<div id='content' class='content' xxx='123' yyy='456' zzz='789'>
<h1>這是標題</h1>
<h2>這也是標題</h2>
<h3>這同樣是標題</h3>
</div>
</body>
</html>
獲取自定義屬性
myReady(function(){
var content = document.getElementById("content");
result = content.attributes;
console.log(result.xxx.value);
console.log(result.yyy);
console.log(result.getNamedItem('zzz').nodeValue);
console.log(result['zzz'].nodeValue);
});
刪除自定義屬性
result.removeNamedItem('zzz');
新增自定義屬性
myReady(function(){
var content = document.getElementById("content");
result = content.attributes;
//創建屬性對象
var attr = document.createAttribute('data-title');
attr.value = 'ooo';
result.setNamedItem(attr);
});
操作固有屬性
通過對象名.屬性名獲得和修改固有屬性。
myReady(function(){
var content = document.getElementById("content");
content.id = 'nwu';
});
操作固有屬性和自定義屬性的通用方法
getAttribute()：可以獲得指定屬性名的屬性值。
注意：
style屬性通過對象名.屬性名（結果是CSSStyleDeclaration對象）和getAttribute()（結果是字符串）兩種方法獲得的結果不同。
onclick屬性通過對象名.屬性名（結果是onclick(event)事件對象）和getAttribute()（結果是字符串）兩種方法獲得的結果不同。
<!DOCTYPE html>
<html>
<head>
<title>練習網頁</title>
<script src='domReady.js'></script>
<script type="text/javascript">
myReady(function(){
var content = document.getElementById("content");
console.log(content.getAttribute('xxx'));
//style屬性
console.log(content.getAttribute('style'));
console.log(content.style);
//onclick屬性
console.log(content.getAttribute('onclick'));
console.log(content.onclick);
});
</script>
</head><body>
<div id='content' style="color:lightblue" onclick="alert('0')" xxx='123'>
<h1>這是標題</h1>
<h2>這也是標題</h2>
<h3>這同樣是標題</h3>
</div>
</body>
</html>
setAttrute()：接收兩個參數，第一個爲屬性名稱，第二個爲屬性的值。屬性名稱爲一個不存在的屬性時會創建它。
removeAttribute()：傳入屬性名稱，移除該屬性。
布爾屬性
（1）checkbox、radio中的checked屬性，非空字符串、true都是選中狀態。任何能轉化爲true的值都是選中，任何能轉化爲false的值都是不選中。
（2）select的Option中的selected屬性，其餘同上。
（3）表單元素（例如input）的readOnly屬性
（4）表單元素（例如input）的disabled屬性
（5）select的multiple屬性
（6）hidden屬性
字符串屬性
大部分屬性都是字符串屬性
id、title、href、src、lang、dir、accesskey、name、value、class
所有html元素都有的屬性，也稱全局屬性：
accesskey、class、contenteditable（是否可編輯元素的內容）、dir、hidden、id、lang、spellcheck、style、tabindex、title、translate
data屬性
以data-開頭，用於存儲頁面或應用程序定義的私有數據。
class屬性
classList屬性
<!DOCTYPE html>
<html>
<head>
<title>練習網頁</title>
<script src='domReady.js'></script>
<script type="text/javascript">
var CL = {
addClass:function(ele,cls){
ele.classList.add(cls);
},
removeClass:function(ele,cls){
ele.classList.remove(cls);
},
hasClass:function(ele,cls){
return ele.classList.contains(cls);
},
toggleClass:function(ele,cls){
return ele.addClass.toggle(cls);
}
};
myReady(function(){
var content = document.getElementsByTagName('div');
var div = content[0];
//使用封裝類操作
CL.addClass(div,'ddd');
CL.removeClass(div,'aaa');
CL.toggleClass(div,'bbb');
//直接操作
div.classList.add('eee');
div.classList.remove('ddd');
console.log(div.classList.contains('eee'));
});
</script>
</head><body>
<div class='aaa bbb ccc'>
<h1>這是標題</h1>
</div>
</body>
</html>