javascript - 如何选择匹配度最高的后代

Question

我正在处理 HTML 内容，其中作者可以在特定元素上设置类，内容可以动态插入，并且开发人员可能拥有也应用相同类来选择元素的代码。我需要从除最高后代之外的所有类(class)中剔除。我有一个递归函数，它已经通过使用 querySelectorAll(selector) 来完成此操作，并且对于每个匹配，它都会爬上树，如果沿途有任何父级具有相同的类，则删除后代的类。它会这样做直到到达 body 元素。因此，对于大量内容来说，这只是几个相当密集的转换之一。

我希望我忽略了一种更快的方法来做到这一点，也许是 native 函数或精益选择器表达式。

例如，在下面，我只想保留两个分支。如果我能找到一种通用方法来选择这两个，则可以比对每个匹配进行递归检查更快地 trim 嵌套分支的类:

<div class="content">
    <div class="branch"> <!-- Keep this -->
        <div class="branch">
            <div class="branch"></div>
        </div>
    </div>
    <div>
        <div>
            <div class="branch"> <!-- Keep this -->
                <div>
                    <div class="branch"></div>
                </div>
            </div>
        </div>
    </div>
</div>

更新:在研究解决方案时，我意识到我不必使用递归，并且可以随时 trim Array.from([selector results]) 。这样可以加快速度，但我仍然认为我忽略了一个明显的选择器表达式或错过了 native 函数。我还发现了 node.contains()，但我还没有看到利用它的好方法。

Answer 1

我相信以下是解决您的问题的最简单方法，并且可能效果很好:

console.log(`------  BEFORE  ------
${document.getElementById('container').outerHTML}`)

// the next three lines are all you need
document.querySelectorAll('.branch .branch').forEach(
  el => el.classList.remove('branch')
)

console.log(`------  AFTER  ------
${document.getElementById('container').outerHTML}`)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<div class="content" id="container">
    <div class="branch"> <!-- Keep this -->
        <div class="branch">
            <div>
              <div class="branch"></div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="branch"> <!-- Keep this -->
                <div>
                    <div class="branch"></div>
                </div>
            </div>
        </div>
    </div>
</div>