javascript - 如何使用 javascript 检查 HTMLCollection 是否包含具有给定类名的元素？

Question

您好，我是编程新手，我想使用 javascript 访问对象内的数组...

我有如下的数据结构，

const some_obj = {
    accessKey: "",
    children: [
        div.someclassname,
        div.someclassname,
        div.someclassname.highlight,
    ]
}

下面是我记录变量时在浏览器控制台中的样子。

object
current: div.wrapper
    accessKey: ""
    align: ""
    childElementCount: 4
    childNodes: NodeList(4) [div.someclassname, div.someclassname.highlight, 
    div.someclassname]
    children: HTMLCollection(4) [div.someclassname, 
    div.someclassname.highlight, div.someclassname]

在控制台中打印 some_obj.children 给出以下输出。 对象. child HTML 集合(3) 0: div.someclassname 1:div.someclassname.highlight 2: div.someclassname

现在我想从 some_obj 检查 some_obj 是否在 children 数组中有 div.classname.highlight。我该怎么做。

我试过用 some_obj.current.children.find() 但说 find 不是函数。

我如何检查 some_obj child 是否有 div.someclassname.highlight。谁能帮我解决这个问题。谢谢

Answer 1

因为 child 不是简单的Array而是HTMLCollection ，应该看的是:Array.from(NodeList)。

假设我们要查找元素 div.someclassname.highlight 是否存在于 children 上(测试类名 someclassname & 高亮).

let childrenNodeArr = Array.from(some_obj.children);
/*or with spread operator [...some_obj.children]*/
/*each element is a dom node we can run classList.contains*/
const elemFound = childrenNodeArr.find(
  e =>
    e.classList.contains("someclassname") && e.classList.contains("highlight")
);

if (elemFound) {
  /*yes a div.someclassname.highlight*/
}

注意:以上测试将通过类名 someclassname 和 highlight 的任何 dom 元素，而不仅仅是 div。 Element.classList.contains Array.from Array.find