javascript - 从元素的样式中定位多个元素

Question

假设我有多个 div s 和同一个类 like

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv" style="display:none">3</div>
<div class="myDiv">4</div>

在这里我想定位具有 display:none 的 div这是第三个 div <div class="x" style="display:none">3</div>

我试过用这个

const elements = document.querySelectorAll('.myDiv');
const element = elements.find(element => element.style.display == "none");
console.log(element)

但是我得到一个错误提示

elements.find is not a function

我试过console.log检查样式的元素样式

const elements = document.querySelectorAll('.myDiv');
elements.forEach(element => console.log(element.style.display));

它输出正确的结果

""
""
"none"
""

但为什么我试过的代码不起作用，为什么是 elements.find not a function ？

Answer 1

but i got an error saying

elements.find is not a function

那是因为 querySelectorAll 返回的 NodeList 不是一个数组，它是一个 NodeList .您可以在执行 find 之前从中创建一个数组:

const elements = document.querySelectorAll('.myDiv');
const element = [...elements].find(element => element.style.display == "none");
// −−−−−−−−−−−−−^^^^−−−−−−−−^
console.log(element);

之所以可行，是因为 NodeList 实例是可迭代的，因此您可以使用扩展符号将它们扩展为数组文字。 (其他选项是 Array.from(elements)、Array.prototype.slice.call(elements)，或者只使用 for 循环。 )

您还可以将选择器从 .myDiv 缩小到 .myDiv[style]，以便它只匹配 .myDiv 具有 style 属性。

不过，理想情况下，如果您可以更改某些内容，以便一开始就没有那种内联样式，我会这样做。例如，如果您使用类来隐藏元素:

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv hidden">3</div>
<div class="myDiv">4</div>

其中 hidden 定义为:

.hidden {
    display: none;
}

然后您可以向浏览器询问您感兴趣的特定元素:

const element = document.querySelector(".myDiv.hidden");