Как выбрать наиболее подходящих потомков

Question

Я работаю с HTML контентом, где авторы могут установить класс для определенных элементов, контент может быть вставлен динамически, и у разработчиков может быть код, который также применяет тот же класс для выбора элементов. Мне нужно обрезать класс от всех, кроме высших потомков. У меня есть рекурсивная функция, которая уже делает это с помощью querySelectorAll (селектор), и для каждого совпадения она сканирует дерево, удаляя класс потомка, если какой-либо родительский элемент на этом пути имеет тот же класс. Он делает это, пока не достигнет элемента тела. Таким образом, для огромного объема контента это лишь одно из нескольких довольно интенсивных преобразований.

Я надеюсь, что я упустил гораздо более быстрый способ сделать это, возможно, встроенную функцию или выражение выбора селектора.

Например, в следующем я хочу сохранить только две ветви. Если мне удастся найти общий способ c, чтобы просто выбрать эти два, классы вложенных веток могут быть удалены намного быстрее, чем рекурсивная проверка для каждого совпадения:

<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>

Обновление: при работе с решение, я понял, что мне не нужно использовать рекурсию, и я могу обрезать Array.from([selector results]) как I go. Так что это немного ускоряет, но я все еще думаю, что пропускаю очевидное выражение селектора или упускаю нативную функцию. Я также обнаружил, что 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>