获取html对象方式

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