<!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>