DOM操作指令
阿新 • • 發佈：2017-10-17
back mov 類名 script 執行 語句 tel 進行 ack
查找元素：
document.getElementById 查找元素的id，由於id是唯一的，所以查找出的是一個單獨的變量；
document.getElementsByClassName 利用類名查找擁有相同類名的所有元素，由於多個元素可以共用一個類名，所以get到的為一個數組，在利用循環語句進行操作時，不能忘記使用下標；
document.getElementsByTagName 標簽名查找，數組；
document.getElementsByName 數組；
操作內容：
非表單元素時在其後或者為其創建的變量名後加 .innerHTML來獲取元素中的內容；
表單元素加 .value獲取其值；
利用等號=來修改獲取的內容
x.innerHTML = xxx;
x.value = xxx;
操作屬性：
getAttribute 獲取元素中的某一項屬性
x.getAttribute("class屬性的名稱/id名稱/自定義屬性名稱")；
setAttribute 設置元素中的某一項屬性
x.setAttribute("屬性名稱","需要修改的值")；
removeAttribute 移除元素中的某一項屬性
x.removeAttribute("屬性名稱")；
操作樣式：
元素名稱.style.樣式名稱 = "需要修改或添加的樣式";
x.style.width = "100px";或者在style標簽中設置好style樣式，再利用setAttribute修改元素中屬性來達到變換樣式操作
1 <head> 2 <style> 3 #div1{ 4 width: 50px; 5 height: 50px; 6 background-color: aqua; 7 } 8 #div2{ 9 width: 50px; 10 height: 50px; 11 background-color: aqua; 12 }13 </style> 14 </head> 15 16 <body> 17 <script> 18 function myFunction(){ 19 var a = document.getElementById("div1"); 20 a.setAttribute("div1","div2"); 21 } 22 </script> 23 <div id="div1" onClick="myFunction()"></div> 24 </body> 25 </script>
用js來創建元素：
createElement
document.createElement("標簽名");
追加元素：
appendChild
被追加的元素名.appendChild(追加元素);
刪除元素：
remove
元素對象.remove；
限時延遲：
timeout 一次性的限時，只執行一次
interval 延遲，循環，秒表什麽的可以用這個
DOM操作指令