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

为清楚起见编辑：

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

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

Answer 1

你的for循环中的item其实就是key（数组索引）。您需要使用语法 elems[item].

从 elems 数组中获取特定元素

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

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

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

UPDATE: 因为 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);
            }
        }
    }

Answer 2

document.getElementsByTagName 将 return 一个元素数组，在你的例子中是页面中的元素数组，所以如果你想拥有第一个 ul

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

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

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

Answer 3

我发现我的问题是我在 React 的父组件中调用 shuffleLists 函数，在我想遍历的 ul 和 li 元素之前在子组件中呈现。 elems var 的控制台输出令人困惑，因为它显示了 HTMLCollection 中的所有列表和列表项。

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

在 React,js 中遍历 HTMLcollection

Iterating through HTMLcollection in React,js

reactjs

for-loop

htmlcollection