1

我在 React.js 组件中迭代和 HTMLCollection 时遇到问题。我有以下功能：

shuffleLists = () => {
        var elems = document.getElementsByTagName("ul");
        console.log(elems)

        for (let item of elems) {
          console.log(item);
        }   
    }

console.log(elems)按预期打印出ul元素的 HTMLCollection。但是 for 循环之后它不会在控制台中打印任何内容，当我希望看到ul控制台中打印的每个元素时。我究竟做错了什么？

为清楚起见进行编辑：

这里的关键问题是console.log(item)循环内的行不会向 chrome 开发工具中的控制台输出任何内容，这同样适用于下面的答案和评论中讨论的其他各种循环语法。

我还注意到console.log(elems)不同浏览器之间记录的长度不同。在 chrome 中我看到HTMLCollection[] length: 10 ... 但在 Firefox 中我看到 HTMLCollection {length 0} ...

4

3 回答 3

3

你的itemfor 循环中的实际上是键（数组索引）。您需要elems使用语法从数组中获取特定元素elems[item]。

重构您的代码（并更改item为key，只是为了清楚起见）：

shuffleLists = () => {
        var elems = document.getElementsByTagName("ul");
        console.log(elems);

        for (let key of elems) {
          console.log(elems[key]);
        }   
    }

更新：因为结果getElementsByTagName()是 NodeList

shuffleLists = () => {
        var elems = document.getElementsByTagName("ul");
        console.log(elems);

        elems.forEach(function(val) {
          console.log(val);
        })
    }

来自MDN 网络文档

虽然NodeList不是Array，但可以使用 对其进行迭代forEach()。也可以Array使用 Array.from().

但是，一些较旧的浏览器还没有实现NodeList.forEach() ，也没有Array.from(). 这可以通过使用来规避 Array.prototype.forEach()。

根据OP的更新要求

shuffleLists = () => {
        var ulElems = document.getElementsByTagName("ul");
        console.log(ulElems);

        for(i = 0; i < ulElems.length; i++) {
            var liElems = ulElems[i].getElementsByTagName("li");
            for(j = 0; j < liElems.length; j++) {
                console.log(liElems[j].innerHTML);
            }
        }
    }
于 2019-12-25T09:19:02.673 回答
1

document.getElementsByTagName将返回一个元素数组，在你的情况下是页面中的元素数组，所以如果你想拥有第一个 ul，你需要有类似下面的东西

shuffleLists = () => {
    var elems = document.getElementsByTagName("ul");
    console.log(elems)

    for (let idx of elems) {
      console.log(elems[idx]);
    }   
}

我建议使用document.getElementById()更精确地了解您选择的元素

于 2019-12-25T09:24:32.663 回答
1

我发现我的问题是我shuffleLists在 React 中从父组件调用函数，在我想要迭代的元素在子组件中呈现ul之前。livar的控制台输出elems令人困惑，因为它显示了HTMLCollection.

当我将shuffleLists函数移动到子组件并在内部调用它时，componentDidMount我能够根据需要循环并控制所有列表项。

于 2019-12-26T09:08:54.393 回答