JavaScript 使用getElementsByTagName获取元素

2019-06-02 13:29:57 浏览数 (1)

使用getElementsByTagName获取元素

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。

代码语言:javascript复制
<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错!不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

练习

使用循环操作列表中的每个元素。

代码语言:javascript复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            // alert(aLi);
            // aLi[0].style.backgroundColor = 'gold';
            for(var i = 0; i < aLi.length; i  ){
                aLi[i].style.backgroundColor = 'gold';
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>

0 人点赞