JavaScript 使用getElementsByTagName获取元素

Devops海洋的渔夫

发布于 2019-06-02 05:29:57

1.7K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

使用`getElementsByTagName`获取元素

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

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

练习

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

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