<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>获取html对象方式</title>
<style type="text/css">
ul li{
list-style: none;
}
</style>
</head>
<body>
<div >
<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>