getElementById() 根據id獲取dom元素
沒有找到則返會Null
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"></div> <script> var box=document.getElementById("box"); console.log(box);//<div id="box"></div> var boxs=document.getElementById("boxs"); console.log(boxs);//null </script> </body> </html>
在不同的范圍內查找dom元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="list"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul> <ol> <li>li</li> <li>li</li> </ol> <script> var ul=document.getElementById("list"); var lis1=ul.getElementsByTagName("li"); console.log(lis1.length);//5 var lis2=document.getElementsByTagName("li"); console.log(lis2.length);//7 </script> </body> </html>
設置元素的css樣式
ele.style.屬性=屬性值
如果是連字符形式的，需要轉換為駝峰形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="list"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul> <ol id="list2"> <li>li</li> <li>li</li> </ol> <script> var ul=document.getElementById("list"); ul.style.color="red"; var ol=document.getElementById("list2"); ol.style.fontWeight="bold"; </script> </body> </html>
設置數組元素的樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="list"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul> <ol id="list2"> <li>li</li> <li>li</li> </ol> <script> var ul=document.getElementById("list"); ul.style.color="red"; var ol=document.getElementById("list2"); var lis=ol.getElementsByTagName("li"); lis[0].style.backgroundColor="pink"; lis[1].style.backgroundColor="#abcdef"; </script> </body> </html>
innerHTML 獲取和設置元素的內容，包括html標簽和文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ol id="list2"> <li>咪咪</li> <li>灰灰</li> </ol> <script> var ol=document.getElementById("list2"); var lis=ol.getElementsByTagName("li"); for(var i=0,len=lis.length;i<len;i++){ lis[i].innerHTML+='~~~'; console.log(lis[i].innerHTML); } </script> </body> </html>
className 設置和獲取元素的類
設置的類會把原來的類替換掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{color:orange;} </style> </head> <body> <ol id="list2"> <li>咪咪</li> <li>灰灰</li> </ol> <script> var ol=document.getElementById("list2"); var lis=ol.getElementsByTagName("li"); lis[0].className="orange"; console.log(lis[0].className); </script> </body> </html>
getAttribute() 獲取屬性
自定義屬性建議都以 data- 開頭
ele.屬性名 直接獲取屬性（標簽自帶屬性，除了class為className)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{color:orange;} </style> </head> <body> <p id="p" class="pp" data-type="title"></p> <input id="text" type="text" name="text" value="hh" validate="true"> <script> var p=document.getElementById("p"); console.log(p.id);//p console.log(p.className);//pp console.log(p.getAttribute("data-type"));//title var text=document.getElementById("text"); console.log(text.type);//text console.log(text.name);//text console.log(text.value);//hh console.log(text.getAttribute("validate"));//true </script> </body> </html>
setAttribute() removeAttribute() 給dom元素設置和刪除屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{color:orange;} </style> </head> <body> <p id="p" class="pp" data-type="title"></p> <script> var p=document.getElementById("p"); p.setAttribute("data-color","orange"); console.log(p.getAttribute("data-color"));//orange p.removeAttribute("data-color"); console.log(p.getAttribute("data-color"));//null </script> </body> </html>