Javascript 如何迭代并查找 NodeList 中的特定元素

Question

我试图获取 NodeList 的所有 div 元素，问题是该列表由不同的项目组成，例如文本、注释和 HTML 元素，我想要获取的是 div 元素和为每个附加一个 id。

.

我想要得到的是下面的div列表。

我当前的代码位于我的 ListElements 下方，即 NodeList。

  var list = $( ".jssorb18" ).find( "span" );
  var listElements = list.prevObject[0].childNodes;

     listElements.forEach( 
        function(currentValue, currentIndex, listObj) { 

            console.log(currentValue); 

        } 
    );

我的输出如下，这很奇怪，因为我知道我的 NodeList 上有 4 个 div 元素或值，任何建议都将受到高度赞赏。

Answer 1

您可以使用instanceof运算符以检查节点是否为 DivElement
如果您只需要附加一个 id:

let divCounter = 0;
listElements.forEach( 
    function(currentNode, currentIndex, listObj) { 
        if (currentNode instanceof HTMLDivElement) {
            currentNode.id = 'myId' + divCounter++;
        }
    }
);

如果您必须重复使用这些 div，您也可以将它们存储在列表中:

const divList = [];
listElements.forEach( 
    function(currentNode, currentIndex, listObj) { 
        if (currentNode instanceof HTMLDivElement) {
            divList.push(currentNode);
        }
    }
);