Question

以下代码只会产生错误。我希望检索每个DIV的REL属性值。不知道，为什么我不能这样做。

我在控制台中看到错误： 未捕获TypeError：对象＃没有方法'getAttribute'

    <div class="boxes">
        <div rel="first" class="box">Box 1</div>
        <div rel="second" class="box">Box 2</div>
        <div rel="third" class="box">Box 3</div>
    </div>
    <script>
        $(function(){
            var i = 0;
            var allDivs = document.getElementsByClassName('box');
            var arr = [];
            arr.push(allDivs);
            setInterval(function(){
                console.log(arr[i].getAttribute('rel'));
                i++;
            }, 1000);
        });
    </script>

Answer 1

您正在将数组（确切地说是NodeList）推入数组并尝试从NodeList对象而不是单个元素获取属性。试试这个：

<div class="boxes">
    <div rel="first" class="box">Box 1</div>
    <div rel="second" class="box">Box 2</div>
    <div rel="third" class="box">Box 3</div>
</div>
<script>
    $(function(){
        var i = 0;
        var allDivs = document.getElementsByClassName('box');
        var arr = [];
        arr.push(allDivs);
        setInterval(function(){
            console.log(arr[0][i].getAttribute('rel'));
            i++;
        }, 1000);
    });
</script>

通过将NodeList推送到另一个数组，您实际上是在创建它：

var arr = [[<div element 1>, <div element 2>, <div element 3>]];

您可能想要做的是将推送线更改为：

arr.push.apply(arr, allDivs);

这会将allDivs集合中的所有单个元素追加到arr。然后，您可以像之前预期的那样访问arr：arr[i].getAttribute('rel')（arr的内容将为[<div element 1>, <div element 2>, <div element 3>];）

Answer 2

用以下代码替换脚本：

     $(function(){
        var i = 0;
        var allDivs = document.getElementsByClassName('box');
        //allDivs itself is an array and there is no need to push the result to an array.

        setInterval(function(){
            console.log(allDivs[i].getAttribute('rel'));
            i++;
        }, 1000);

     });

HTMLcollection＆amp; amp; Javascript中的数组

2 个答案: