1. 獲取，修改元素內容
（1）獲取元素內容
innerText// 返回指定標簽中 的內容，但是不識別HTML標簽，去除空格和換行
innerHTML //直接返回整個標簽的內容，包括HTML標簽，空格，和換行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="d1"> 123 456 <span>456</span> </div> <script> //先獲取類選擇為d1 的元素 var div01 = document.querySelector(".d1"); //innerText ,獲取指定標簽的內容， //但是不識別HTML標簽，並去除空格和換行 console.log(div01.innerText); console.log("==========================================="); //innerHTML 獲取指定標簽里面所有的內容， //包括HTML標簽和空格換行 console.log(div01.innerHTML); </script> </body> </html>
（2）修改元素的內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <div>hahhahahahahahha</div> 10 <script> 11 //修改元素的內容，首先你要獲取那個元素 12 var div01 = document.querySelector("div"); 13 //綁定一個鼠標經過事件 14 div01.onmouseover = function(){ 15 //就是這么簡單，同理使用 innerText 也可以修改元素的內容，方法 16 //一樣，但是一般都是使用innerHTML 來修改元素的內容 17 this.innerHTML = "lalalallalal"; 18 } 19 </script> 20 </body> 21 </html>
2. 修改元素的屬性
（1）修改標簽內的屬性 （如 <img src="........." >中src這樣的屬性）
先獲取元素，然后直接修改元素的屬性即可
示例：有一個按鈕，點擊可以切換下方的圖片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 button{ 9 display: block; 10 width: 160px; 11 height: 30px; 12 margin: 100px auto; 13 } 14 15 div{ 16 width: 269px; 17 height: 69px; 18 margin: 0 auto; 19 } 20 </style> 21 </head> 22 <body> 23 <button >this</button> 24 <div > <img src="./img/big01.jpg" alt=""></div> 25 26 <script> 27 var btn = document.querySelector("button"); 28 var img = document.querySelector("img") 29 30 flag = 0; 31 btn.onclick = function(){ 32 if(flag == 0){ 33 //修改元素的屬性 34 img.src = "./img/big02.jpg"; 35 flag = 1; 36 }else{ 37 img.src = "./img/big01.jpg" 38 flag = 0; 39 } 40 } 41 </script> 42 </body> 43 </html>
點擊前：
點擊后：
（2） 表單元素的屬性設置
表單元素是特殊的，你無法通過innerHTML去修改表單中的內容，可以通過 value屬性進行修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #text01{ width: 260px; height: 30px; background-color: rgb(132, 125, 133,.3); color: #999; } </style> </head> <body> <input type="text" name="" id="text01" value="請輸入密碼：" > <script> //獲取表單input var input = document.querySelector("#text01") //獲得焦點事件 onfocus 焦點就是鼠標的光標 //失去焦點事件 onblur //介紹一種新的注冊事件的方式 //方法監聽注冊事件 事件源.addEventListener('事件類型',function(){事件處理程序}) //傳統方式注冊事件 ： 事件類型以 on開頭，如onclick, onmouseover, onfoucs,而方法監聽 //方式注冊事件的事件類型不需要以 on 開頭。 //傳統方式注冊事件，同一個元素的同一個事件只能有一個事件處理程序 //方法監聽方式注冊事件，同一個元素的同一個事件可以注冊多個監聽處理函數 input.addEventListener("focus",function(){ //當表單獲得焦點后，將其內容變為空，再將其類型變為 密碼框 this.value = ""; this.type = "password"; }) </script> </body> </html>
(3) 修改元素的樣式屬性
可以通過 element.style 進行修改
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 div{ 9 width: 0; 10 height: 0; 11 border: 200px solid transparent; 12 border-bottom-color: violet; 13 margin:30px auto; 14 background-color: yellow; 15 16 } 17 </style> 18 </head> 19 <body> 20 <div></div> 21 22 <script> 23 //可以通過 element.style 來修改元素的樣式屬性，如大小，顏色，位置 24 //比如 將div 元素中的那個黃色的三角修改為綠色 25 var div = document.querySelector("div"); 26 div.addEventListener("click",function(){ 27 //注意屬性名和css 中的不太一樣，命名采用駝峰式方法 28 this.style.borderBottomColor = "green"; 29 30 }) 31 32 33 </script> 34 </body> 35 </html>
點擊后：
當我們要改變 的屬性太多時，可以在css中另外創建一個類標簽的樣式，然后再js 中通過 className調用這個
樣式來完成修改，相當於給這個元素重新設置了新的class
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 div{ 9 width: 0; 10 height: 0; 11 border: 200px solid transparent; 12 border-bottom-color: violet; 13 margin:30px auto; 14 background-color: yellow; 15 16 } 17 18 .yuan{ 19 width: 300px; 20 height: 300px; 21 background-color: turquoise; 22 border-radius: 50%; 23 } 24 </style> 25 </head> 26 <body> 27 <div></div> 28 29 <script> 30 //可以通過 element.className 重新定義樣式 31 //比如 將div 元素中變成一個藍色的圓形 32 var div = document.querySelector("div"); 33 div.addEventListener("click",function(){ 34 35 this.className = "yuan"; 36 }) 37 38 39 </script> 40 </body> 41 </html>