reactjs - 在 React,js 中遍历 HTMLcollection

Question

我在 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。但是当我希望在控制台中看到每个 ul 元素时，它不会在控制台中打印任何内容后的 for 循环。我做错了什么？

为清楚起见编辑:

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

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

Answer 1

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

重构您的代码(并将 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 Web Docs

Although NodeList is not an Array, it is possible to iterate over it with forEach(). It can also be converted to a real Array using Array.from().

However, some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using 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);
            }
        }
    }