遍历作用域中的元素并通过Javascript匹配类型

Question

我试图限制用户可以在其配置中定义的搜索范围，然后遍历其中的每个元素，以便仅匹配标题元素。

我目前的scope是有限的：

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

它在console.log(scope);中返回以下内容

​

​

我一直在试图找到一种循环遍历元素的方法，但我尝试的所有方法都不起作用。

我试过了：

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

但这会以字符串的形式返回HTML。

我试过做一个for( var i in scope ) OR for( var i in elements )，但它返回了一大堆看起来不正确的循环数据。

示例DOM代码显然不是详尽的，但其目标是按顺序获取每个H1-6，然后能够编辑innerText或编辑元素以添加其他标记。

Answer 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');
});