Как я могу l oop через HTML узлы DOM?

Question

Я хочу l oop через вложенный HTML DOM-узел, как показано ниже:

<div id="main">
  <div class="nested-div-one">
    <div class="nested-div-two">
      <div class="nested-div-three">

      </div>
    </div>
  </div>
  <div class="nested-div-one">
    <div class="nested-div-two">
      <div class="nested-div-three">

      </div>
    </div>
  </div>
</div>

Как мне сделать это, используя Javascript to l oop через каждый из разделителей?

Answer 1

Я предполагаю, что OP не был указан c для элементов DIV, вот более динамичный c подход:

Итак, сначала вы хотите получить первый контейнер, в вашем случае это:

var mainEl = document.getElementById('main');

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

function doSomethingWithChildren(el, something, recursive) {
   for(let i = 0; i < el.children.length; i++) {
       something(children[i]);
       if(recursive) {
           doSomethingWithChildren(children[i], something, recursive);
       }
   }
}

А теперь, допустим, вы хотите изменить все фоны div на красный:

doSomethingWithChildren(mainEl, function(el) { el.style.background = 'red' });

Answer 2

Вы можете использовать ваниль javascript для этого

document.querySelectorAll('div').forEach(el => {
  // el = div element
  console.log(el);
});