javascript - 在数组中查找跨度元素的索引时要搜索什么？

Question

我正在尝试检索转换为数组的 HTML 子项集合中特定对象的索引。

数组由一定范围内被span标签包围的所有DOM元素组成。

我的计划是使用 indexOf数组上的方法，但是我不确定在该方法中使用哪个参数搜索元素。

下面是我的初始代码。

var htmlCollectionChildren = Array.prototype.slice.call(range.commonAncestorContainer.children);
console.log(htmlCollectionChildren.indexOf(xxx)

下面是数组的示例表示。每个跨度都是一个对象，具有大量参数。

[span#1.highlight, span#0.highlight]

0:span#1.highlight

1:span#0.highlight

我尝试将字符串 span#0.highlight 作为参数传递，但它返回 -1。

(htmlCollectionChildren.indexOf('span#1.highlight')

我应该搜索什么？

Answer 1

您可以通过 tagName 的串联值进行.filter()，如小写字符、"#"、id 、“.” 和 className

let match = "span#0.highlight";

let res = htmlCollectionChildren.filter(({id, className, tagName}) => 
            `${tagName.toLowerCase()}#${id}.${className}` === match);