屬性分為固有屬性property和自定義屬性attribute
固有屬性查看
固有屬性可以通過ele.property 來獲取，自定義屬性不行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var input=document.querySelector("input"); console.log(input.type);//text console.log(input.value);//txt console.log(input.a);//undefined console.log(input.title);//"" }); </script> </head> <body> <input type="text" value="txt" a="b"> </body> </html>
.attributes 返回類數組，獲取所有屬性，包括自定義屬性和固有屬性
如果定義了同名屬性，后面的屬性會被忽略
如果自定義屬性時出現了大寫，會統一轉為小寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); console.log(div.attributes);// }); </script> </head> <body> <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div> </body> </html>
獲取指定的自定義屬性的屬性值
ele.attributes.getNamedItem(屬性名).nodeValue
ele.attributes[屬性名].nodeValue
注意，如果某個固有屬性沒有在元素中被人為定義，則不可獲取
如果是人為定義的固有屬性，或者自定義屬性，則可以用該方法獲取
.nodeName 獲取元素的節點名
ele.attributes.removeNamedItem(屬性名) 移除屬性
創建屬性：
1、.createAttribute(屬性名) 創建屬性
2、attr.value=屬性值 給創建的屬性設置屬性值
3、.attributes.setNamedItem(屬性名，屬性值)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); //獲取自定義屬性方法一 console.log(div.attributes.getNamedItem("aa").nodeValue);//xx //獲取自定義屬性方法二 console.log(div.attributes["aa"].nodeValue);//xx //獲取未人為定義的固有屬性 console.log(div.attributes.getNamedItem("nodeName"));//null //獲取固有屬性的正確打開方式 console.log(div.nodeName);//DIV //獲取人為定義的固有屬性 console.log(div.attributes.getNamedItem("id").nodeValue);//div // 移除屬性 div.attributes.removeNamedItem("bb"); console.log(div.attributes); //創建屬性 var attr=document.createAttribute("data-my"); attr.value="myattr"; div.attributes.setNamedItem(attr); }); </script> </head> <body> <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div> </body> </html>
獲取未人為定義的固有屬性，返回null
獲取未人為定義的固有屬性的nodeValue，會報錯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); //獲取未人為定義的固有屬性 console.log(div.attributes.getNamedItem("title"));//null console.log(div.attributes.getNamedItem("title").nodeValue);//報錯 }); </script> </head> <body> <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div> </body> </html>
用.innerHTML來操作固有屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); div.innerHTML="這是innerHTML設置的文本哈"; console.log(div.innerHTML);//這是innerHTML設置的文本哈 }); </script> </head> <body> <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz">這是div</div> </body> </html>
通用方法操作固有屬性和自定義屬性
getAttribute()
setAttribute()
removeAttribute()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); console.log(div.getAttribute("aa"));//xx console.log(div.getAttribute("style"));//color:orange console.log(div.style);//CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …} console.log(div.getAttribute("onclick"));//alert('hello~') console.log(div.onclick);//onclick(event) {alert('hello~')} }); </script> </head> <body> <div id="div" url="index.html" aa="xx" Bb="yy" aa="zz" style="color:orange" onclick="alert('hello~')">這是div</div> </body> </html>
以上代碼表明，使用getAttribute() 和 .屬性名 來獲取屬性值，在某些情況下結果是不同的，比如style和Onclick
通常，獲取固有屬性使用 .屬性名，獲取自定義屬性使用getAttribute()
setAttribute() 設置自定義屬性時，不存在兼容性問題
但是設置部分固有屬性，比如onclick和style時，在IE7及以下版本存在兼容性問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("#div"); // 設置自定義屬性 div.setAttribute("data-a","a"); div.setAttribute("style","color:purple"); div.setAttribute("onclick","alert(0)"); }); </script> </head> <body> <div id="div" url="index.html">這是div</div> </body> </html>
正常瀏覽器效果
IE7及以下效果
由於不支持querySelector方法，先改成document.getElementById()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.getElementById("div"); // 設置自定義屬性 div.setAttribute("data-a","a"); div.setAttribute("style","color:purple"); div.setAttribute("onclick","alert(0)"); }); </script> </head> <body> <div id="div" url="index.html">這是div</div> </body> </html>
不再報錯，但設置的style屬性和onclick方法都沒有生效
removeAttribute() 刪除屬性，不存在兼容性問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.getElementById("div"); // 設置自定義屬性 div.removeAttribute("style"); }); </script> </head> <body> <div id="div" url="index.html" style="color:orange">這是div</div> </body> </html>
布爾屬性
通過布爾屬性操作DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var inputs=document.querySelectorAll("input"); inputs[0].checked=true; }); </script> </head> <body> <input type="checkbox" name="city">杭州 <input type="checkbox" name="city" checked="checked">寧波 <input type="checkbox" name="city" checked>溫州 </body> </html>
input.checked 設置成任何非空字符串，都換轉為布爾值true，都可以選中
但這種自動轉換在IE7以下會失敗
另外固有屬性不能通過removeAttribute() 來移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var inputs=document.querySelectorAll("input"); inputs[0].checked=true; inputs[0].checked="checked"; inputs[0].checked=1; inputs[1].checked=0; inputs[1].checked=""; inputs[1].removeAttribute("checked"); }); </script> </head> <body> <input type="checkbox" name="city">杭州 <input type="checkbox" name="city" checked="checked">寧波 <input type="checkbox" name="city" checked>溫州 </body> </html>
.options 可以獲取select下的所有option選項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var select=document.getElementById("select"); var options=select.options; options[1].selected=true; }); </script> </head> <body> <select name="select" id="select"> <option value="">請選擇</option> <option value="1">杭州</option> <option value="2">寧波</option> <option value="3">溫州</option> </select> </body> </html>
.readOnly 只讀屬性 （注意O必須大寫）
.disabled 禁用屬性
區別：readOnly數據可以提交到服務器，disabled數據不會提交到服務器
select的multiple屬性 設置多選，下拉框變列表框
HTML5新增屬性hidden 使元素不再顯示（低版本IE無法兼容）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var input=document.getElementById("input"); input.readOnly=false; var input2=document.getElementById("input2"); input2.disabled=true; var select=document.getElementById("select"); select.multiple=true; var div=document.getElementById("div"); div.hidden=false; }); </script> </head> <body> <input type="text" value="中國" readonly id="input"> <input type="text" value="中國" id="input2"> <select name="select" id="select"> <option>杭州</option> <option>寧波</option> <option>溫州</option> </select> <div id="div" hidden="hidden">這是div</div> </body> </html>
常見的字符串屬性（大部分都是字符串屬性）
id 唯一標識
class 類
href 多用於a鏈接和link
src 多用於img和script和video等等
lang 輔助搜索引擎等的語言識別 <html land="zh">
zh 中文 zh-cn 中文簡體 zh-sg 新加坡 zh-hk 香港
accesskey 組合鍵，快捷鍵
在谷歌瀏覽器中使用alt+設置的快捷鍵字母來激活
name 多用於表單元素的控件名稱
value 表單元素的值
title 元素不可見時的提示信息
W3C全局屬性
accesskey class dir id lang title
contenteditable 元素內容是否可編輯
hidden 元素是否隱藏
spellcheck 元素內容編輯時的語法檢查
style 樣式
tabindex 使用tab鍵導航時的切換順序
當一個頁面中有多個元素使用相同的id時，使用document.getElementById()能夠取得元素，但是只會取得第一個
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var p=document.getElementById("p"); console.log(p);//<p id="p">這是一段文字1</p> var p=document.getElementById("p"); p.className="active"; }); </script> </head> <body> <p id="p">這是一段文字1</p> <p id="p">這是一段文字2</p> <input type="text" accesskey="n" value="n"><!-- alt+n --> <input type="text" accesskey="m" value="m"><!-- alt+m --> </body> </html>
data屬性 以data-開頭
設置時多單詞以連字符分開，如data-aa-bb
JS獲取時使用dataset.屬性名 后面需要轉換成小駝峰形式
但是IE瀏覽器兼容性不是很好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.getElementById("div"); console.log(div.dataset.toggle);//modal console.log(div.dataset.xxxYyy);//aa }); </script> </head> <body> <div id="div" data-toggle="modal" data-xxx-yyy="aa">這是驗證data屬性的div</div> </body> </html>
class屬性
自定義class相關的操作方法
this指向當前對象
gi表示全局匹配且不區分大小寫
str.replace(exp,str2) 將str字符串中，滿足exp正則匹配的部分，用str2替換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var classMethod={ //獲取class getClass:function(ele){ // 將多個空格統一轉換為一個空格，並根據空格來將字符串轉為數組 return ele.className.replace(/\s+/," ").split(" "); }, //判斷是否存在某個class hasClass:function(ele,cls){ // 給獲取的class字符串前后加上空格，再給要查找的類名前后也加上空格 // -1表示不存在，否則為存在 return -1< (" "+ele.className+" ").indexOf(" "+cls+" "); }, //添加class addClass:function(ele,cls){ //this指向classMethod這個對象 if(!this.hasClass(ele,cls)){ ele.className+=" "+cls; } }, //刪除class removeClass:function(ele,cls){ if(this.hasClass(ele,cls)){ //gi表示全局匹配，且不區分大小寫 var exp=new RegExp("(^|\\s)"+cls+"($|\\s)","gi"); ele.className=ele.className.replace(exp," "); } }, //切換class toggleClass(ele,cls){ if(this.hasClass(ele,cls)){ this.removeClass(ele.cls); }else{ this.addClass(ele,cls); } } } var div=document.querySelector("div"); console.log(classMethod.getClass(div));//(3) ["a", "b", "c"] console.log(classMethod.hasClass(div,"a"));//true console.log(classMethod.hasClass(div,"z"));//false classMethod.addClass(div,"z"); classMethod.removeClass(div,"z"); classMethod.toggleClass(div,"z"); }); </script> </head> <body> <div class="a b c">這是測試class相關的div</div> </body> </html>
js自帶的classList對於class的操作
ele.classList.add(cls)
ele.classList.remove(cls)
ele.classList.toggle(cls)
ele.classList.contains(cls)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.querySelector("div"); console.log(div.classList.add("z")); console.log(div.classList.toString());//a b c z console.log(div.classList.remove("a")); console.log(div.classList.toString());//b c z console.log(div.classList.contains("b"));//true console.log(div.classList.toString());//b c z console.log(div.classList.toggle("c"));//false console.log(div.classList.toString());//b z }); </script> </head> <body> <div class="a b c">這是測試class相關的div</div> </body> </html>
可惜兼容性是：IE11+