Перебирать элементы в области видимости и сопоставлять по типу с помощью Javascript

#javascript

Вопрос:

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

В настоящее время у меня scope ограниченное:

 const scope = document.getElementById( 'main' );

Который возвращает это в console.log(scope);

Я пытался найти способ перебирать элементы, но все, что я пытаюсь, не работает.

Я пробовал:

 const elements = scope.getElementsByTagName('*');

Но это возвращает HTML в виде строки.

Я пытался сделать a for( var i in scope ) OR for( var i in elements ) , но это возвращает целую кучу зацикленных данных, которые кажутся неправильными.

Пример кода DOM, очевидно, не является исчерпывающим, но цель состоит в том, чтобы получить все H1-6 в их порядке, а затем иметь возможность редактировать innerText или редактировать элемент, чтобы добавить тег anther.

Ответ №1:

Ванильный JS:

 const scope = document.getElementById('main');

const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

headers.forEach(h => {
    h.innerText = 'modified text';
});

Если вы можете использовать jQuery, попробуйте это:

 var scope = $('#main');

scope.children(':header').each(function(index) {
    $(this).text('modified text');
});