<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>獲取html對象方式</title> <style type="text/css"> ul li{ list-style: none; } </style> </head> <body> <div id="box"> <ul> <li><a href="">li里內容-01</a></li> <li><a href="">li里內容-02</a></li> <li><a href="">li里內容-03</a></li> <li><a href="">li里內容-04</a></li> </ul> <span>多個span</span> <span>多個span</span> <span>多個span</span> <span>多個span</span> <div class="obj"> class對象內容</div> <div class="obj"> class對象內容</div> <div class="obj"> class對象內容</div> <div class="obj"> class對象內容</div> <div class="obj"> class對象內容</div> <input type="text" name="objname" placeholder="請寫入01"> <input type="text" placeholder="請寫入02"> <input type="text" name="objname" placeholder="請寫入03"> </div> </body> <script type="text/javascript"> // 通過ID獲取html元素對象，ID號在html文檔當中應該是唯一的。返回的是唯一element對象。並且所有瀏覽器都兼容。 //document.getElementById('box').style.backgroundColor = 'red'; // cladd 通過class獲取對象 獲取到的是數組 通過寫 [0]數組下標確定 對象 // document.getElementsByClassName('obj')[0].style.backgroundColor = 'blue'; //通過標簽名獲取對象 獲取到的是數組 可以根據標簽出現的位置定位元素的對象。所有瀏覽器都兼容 // document.getElementsByTagName('span')[2].style.color = 'red'; // 通過name屬性來定位html對象，但是並不是所有標簽都有name屬性，但是我們可以人為的加上name屬性，這樣也可以定位到，由於name屬性可能有多個，不唯一。所以這個方法返回的也是一個數組，同樣我們也可以根據html當中name的位置，進行對name的定位。IE系列不兼容，不推薦使用。 document.getElementsByName('objname')[1].style.color = 'red'; </script> </html>