Question

<!DOCTYPE html>
<html>
<body>
    <div class="dropdowntextbox">
        <input type="text" class="dropdowntext">
        <div class="dropdown-content">
            <a href="#">Hi again</a>
            <a>Hi again</a>
        </div>
    </div>

    <div class="dropdowntextbox">
        <input type="text" class="dropdowntext">
        <div class="dropdown-content">
            <a href="#">Hi again</a>
            <a>Hi again</a>
        </div>
    </div>
    <script>
        alert(document.getElementsByClassName("dropdowntextbox"));
        for (div in document.getElementsByClassName("dropdowntextbox")){
            alert(div.toString());
        }
    </script>
</body>
</html>

此代码的警报返回：

[object HTMLCollection]
0
1
length
item
namedItem

我希望警报能够为[object HTMLCollection]提供，然后只提供<div>个class="dropdowntextbox"元素。这种行为的原因是什么？

Answer 1

for..in迭代给定对象的属性。也就是说，您正在迭代HTMLCollection属性。

您需要使用Array.from将整个HTMLCollection转换为常规数组并使用Array.prototype.forEach：

Array.from(document.getElementsByClassName("dropdowntextbox")).forEach(el => {

})

此外，如果您在ES2015 +环境中，则可以使用for..of：

for(let el of Array.from(document.getElementsByClassName("dropdowntextbox"))) {

}

Answer 2

那是因为HTMLCollection实际上是一个对象，你可以通过记录

看到

typeof document.getElementsByClassName("dropdowntextbox");

所以你的 for .. in 循环通过对象键。要实际循环HTML对象，您可以将HTMLCollection转换为带有

的数组

var nodes = Array.from(document.getElementsByClassName("dropdowntextbox"));

然后像往常一样循环

for(var i = 0; i < nodes.length; i++){
    //use nodes[i]
}

Answer 3

<!DOCTYPE html>
<html>
<body>
    <div class="dropdowntextbox">
        <input type="text" class="dropdowntext">
        <div class="dropdown-content">
            <a href="#">Hi again</a>
            <a>Hi again</a>
        </div>
    </div>

    <div class="dropdowntextbox">
        <input type="text" class="dropdowntext">
        <div class="dropdown-content">
            <a href="#">Hi again</a>
            <a>Hi again</a>
        </div>
    </div>
    <script>
  var tags = document.getElementsByClassName("dropdowntextbox");  
        for (var i=0; i < tags.length;i++){
            alert(tags[i].toString());
        }
    </script>
</body>
</html>

你应该使用下面的循环：

var tags = document.getElementsByClassName("dropdowntextbox"); for (var i=0; i < tags.length;i++){ alert(tags[i].toString()); }

Answer 4

您正在使用for..in循环，该循环遍历对象的可枚举属性名称 - 这将为您提供对象的所有属性，在本例中为HTMLCollection（不是数组，它会给你你预期的行为）

通过使用for..of循环，它将使用特定于对象的迭代方法，循环迭代器生成的值;在这种情况下，你的3个div。

for (let div of document.getElementsByClassName("dropdowntextbox")){ alert(div.toString()); }

Answer 5

在你的＆＃34; for＆＃34;循环，循环遍历HTMLCollection对象的属性。

您应该执行以下操作：

var collection = document.getElementsByClassName("dropdowntextbox");

for(x = 0; x < collection.length; x++)
{
  alert(collection[x].innerHtml);
}

在此测试：W3School

如何使用getElementsByClassName获取具有某些类的所有标记？

5 个答案: