這節主要學習HTML5中新增的DOM操作，獲取dom元素、操作元素類樣式、自定義屬性。
1.新增獲取dom元素API
1>querySelector(選擇器名稱)
作用：獲取單個元素，如果獲取的元素不止一個，那么只會返回滿足條件的第一個元素。
參數：選擇器
標簽選擇器：標簽本身
類選擇器：類名前加'.'
id選擇器：類名前加'#'
2>querySelectorAll(選擇器名稱)
作用：獲取滿足條件的所有元素--結果是類數組
<body> <ul> <li>請選擇</li> <li class="red">前端</li> <li class="green">java</li> <li class="blue">javascript</li> <li id="c">c++</li> </ul> <script> window.onload=function(){ // /!*querySelector:獲取單個元素，如果獲取的元素不止一個，那么只會返回滿足條件的第一個元素*!/ // /!*參數要求：如果是類選擇器，必須添加. 如果是id選擇器， 必須添加# ,否則當成標簽處理*!/ var javaLi=document.querySelector(".green"); var javaLi=document.querySelector("#c"); console.log(javaLi); // /!*querySelectorAll獲取滿足條件的所有元素--數組*!/ var allLi=document.querySelectorAll("li")[0]; console.log(allLi); } </script> </body>
2.操作元素類樣式
1>classList屬性
作用：元素classList屬性可以獲取元素的所有類樣式---類數組。
方法：
add(類名)：標在原有類樣式基礎上追加新類樣式。
remove(類名)：刪除指定的類樣式。
toggle(類名)：切換，如果有指定類名的類樣式就刪除，否則就添加。
contains(類名)：判斷元素classList中是否包含指定類樣式。
item(索引)：獲取classList指定索引的類樣式。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color:red } .green{ color: green; } .blue{ color: blue; } .underline{ text-decoration: underline; } </style> </head> <body> <ul> <li class="red">油潑面</li> <li class="blue">匯通面</li> <li>岐山臊子面</li> <li class="red">棍棍面</li> </ul> <input type="button" value="為第一個li元素添加樣式" id="add"> <input type="button" value="為第二個li元素移除樣式" id="remove"> <input type="button" value="為第三個li元素切換樣式" id="toggle"> <input type="button" value="判斷第四個li元素是否包含某個樣式" id="contain"> <script> window.onload=function(){ /*add:為元素添加指定名稱的樣式.一次只能添加一個樣式*/ document.querySelector("#add").onclick=function(){ /*classList:當前元素的所有樣式列表-數組*/ document.querySelector("li").classList.add("red"); document.querySelector("li").classList.add("underline"); /*獲取樣式*/ var result=document.querySelector("li").classList.item(2); console.log(result); } /*remove:為元素移除指定名稱的樣式(不是移除class屬性)，一次也只能移除一個*/ document.querySelector("#remove").onclick=function(){ document.querySelector(".blue").classList.remove("blue"); } /*toggle：切換元素的樣式：如果元素之前沒有指定名稱的樣式則添加。如果有則移除*/ document.querySelector("#toggle").onclick=function(){ document.querySelectorAll("li")[2].classList.toggle("green"); } /*contains:判斷元素是否包含指定名稱的樣式，返回true/false*/ document.querySelector("#contain").onclick=function(){ var isContain=document.querySelectorAll("li")[3].classList.contains("red"); console.log(isContain); } } </script> </body>
3.自定義屬性
1>如何定義
規范：
i：以data開頭
ii：data后必須有一個字符
建議：
i：名稱都小寫
ii：名稱中最好不要包含特殊符號
2>如何獲取
方法：dataset[屬性名]，屬性名必須使用駝峰法命名。
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p data-school-name="itcast">音樂</p> <p data-name="itcast">貓咪</p> <!--取值--> <script> window.onload=function(){ var p=document.querySelector("p"); /*獲取自定義屬性值*/ /*將data-后面的單詞使用camel命名法連接:必須使用camel合法法獲取值否則有可能無法獲取到值*/ var value=p.dataset["schoolName"];//data-school-name console.log(value); } </script> </body>