选择不是任何元素的父元素的每个元素答案

【问题标题】：Select every element that isn't a parent to any elements选择不是任何元素的父元素的每个元素
【发布时间】：2020-06-10 20:40:34
【问题描述】：

我正在开发一款通过使用 CSS filter: invert(1); 属性在某些时候出现故障的游戏。但是，当您在body 上使用该属性时，它会生成position: absolute; 的所有内容。这不好，因为我需要大多数元素为fixed，并且所有内容都变为负数top 并且不可见。如何有效地获取列表中不是任何其他元素的父级但包含文本的所有元素？任何答案或其他堆栈溢出主题都会很好！这是我的一些代码：

// In a working loop called Repeat()
if(Glitch == 1) {


    document.querySelector(".ChangableStyles").innerHTML = "* {filter: invert(1)}"


} else  {

    document.querySelector(".ChangableStyles").innerHTML = ""

}

编辑：既然你们都在问，.ChangableStyles 标签是一个样式元素。当我将该样式标签的 innerHTML 更改为有效的 CSS 样式时，所有内容的过滤器都适用。我不想粗鲁，但我已经弄清楚了.ChangableStyles 的事情。谢谢。

【问题讨论】：

欢迎来到 Stack Overflow。 SO 不是免费的代码编写服务；包含您用来尝试解决手头问题的代码以及具体您在该尝试中遇到的问题会很有帮助。另见：How to Ask
Google 会给你developer.mozilla.org/en-US/docs/Web/CSS/:empty。其余的不清楚。
@RokoC.Buljan 我也需要它来选择带有文本的元素。
很难知道你想在这里做什么。向 innerHTML 添加字符串不会影响样式。
@jmargolisvt 是正确的，您正在查询已具有 ChangeableStyles 类的元素并将 HTML 在这些节点中 设置为CSS 规则的文本表示。你在上面的 sn-p 中所做的并不是你所期望的 - 你真的应该重新审视你的基本 JavaScript 概念。

标签： javascript css-filters

【解决方案1】：

您提到您已经有一个元素列表，但不清楚您是如何生成该列表的。我假设您要“选择”<body></body> 中没有任何子级的所有元素。

您可以结合使用Array.from()、您预先存在的选择逻辑和使用node.childElementCount === 0 的filter() 来完成您描述的内容。然而，在更高复杂度的 DOM 上，这在计算上会很昂贵，所以我恳请你重新考虑你的设计，而不是选择这条路线。需要明确的是，这将满足您在没有子元素的 DOM 中选择 ANY Node 的要求（“不是任何其他元素的父元素”），其中包括任何 script、style 或其他“ body 中的用户不可见”节点。

document.getElementById('get-elements-button').addEventListener('click', function () {
  console.log(Array.from(document.body.getElementsByTagName("*")).filter(function (node) {
    return node.childElementCount === 0;
  }));
});

<div class="has-child-elements">
  <a href="#">This is a child element</a>
</div>
<div class="has-no-child-elements">
</div>
<div class="has-child-elements">
  <a href="#">This is also a child element</a>
</div>

<button id='get-elements-button'>Get elements with child elements &rarr;</button>

【讨论】：