Javascript 我需要使用递归来导航DOM中的每个元素的帮助

我需要使用递归来导航DOM中的每个元素，对于每个body元素，确定它是否是元素节点。如果是，我需要向它添加一个子节点。我需要使用JavaScript来完成这个任务。以下是我目前在JavaScript文件中的内容：

    window.addEventListener("load", function() {

      var highlightButton = document.getElementById("highlight");
      highlightButton.addEventListener('click', search);

      function search(node) {
       if (node.nodeType === 1) {
       var spanEl = document.createElement("span");
       spanEl.className = "hoverNode";
       node.appendChild(spanEl);
       spanEl.innerHTML = spanEl.parentNode.tagName;
     }
   }
 })

---

我知道如何附加子节点，但我不知道如何遍历整个DOM并将子节点附加到每个元素。

除了支持旧浏览器（如IE6和IE7）之外，是否有任何特定原因意味着创建递归函数

如果没有，只需使用

document.body.querySelectorAll（'*'）

选择DOM中的每个元素节点，而忽略body元素之外的节点。例如：

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    function search () {
        document.body.querySelectorAll('*').forEach(function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName; 
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    // traverse downwards from rootEl while excluding Comment elements on IE6 7 & 8
    function traverseDOMFrom (rootEl, iterator) {
        if (!rootEl || rootEl.nodeType !== 1 || typeof iterator !== 'function') {
            return;
        }

        if (rootEl.children && rootEl.children.length > 0) {
            Array.prototype.slice.call(rootEl.children).forEach(function (el) {
                traverseDOMFrom(el, iterator);
            });
        }

        iterator(rootEl);
    }

    function search () {
        traverseDOMFrom(document.body, function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName;
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

如果是，则选项为：

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    function search () {
        document.body.querySelectorAll('*').forEach(function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName; 
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    // traverse downwards from rootEl while excluding Comment elements on IE6 7 & 8
    function traverseDOMFrom (rootEl, iterator) {
        if (!rootEl || rootEl.nodeType !== 1 || typeof iterator !== 'function') {
            return;
        }

        if (rootEl.children && rootEl.children.length > 0) {
            Array.prototype.slice.call(rootEl.children).forEach(function (el) {
                traverseDOMFrom(el, iterator);
            });
        }

        iterator(rootEl);
    }

    function search () {
        traverseDOMFrom(document.body, function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName;
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

---

请注意，在这两种情况下，如果您希望在IE6、7和8上支持这些功能，则需要使用和的polyfill否则，您也可以通过使用自定义函数迭代元素的数组来获得相同的结果。对于此

。addEventListener

，如果不需要支持多个侦听器，则可以使用简单的事件处理程序。

是否有任何特定原因暗示创建递归函数，除了支持旧的浏览器，比如IE6和IE7

如果没有，只需使用

document.body.querySelectorAll（'*'）

选择DOM中的每个元素节点，而忽略body元素之外的节点。例如：

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    function search () {
        document.body.querySelectorAll('*').forEach(function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName; 
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    // traverse downwards from rootEl while excluding Comment elements on IE6 7 & 8
    function traverseDOMFrom (rootEl, iterator) {
        if (!rootEl || rootEl.nodeType !== 1 || typeof iterator !== 'function') {
            return;
        }

        if (rootEl.children && rootEl.children.length > 0) {
            Array.prototype.slice.call(rootEl.children).forEach(function (el) {
                traverseDOMFrom(el, iterator);
            });
        }

        iterator(rootEl);
    }

    function search () {
        traverseDOMFrom(document.body, function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName;
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

如果是，则选项为：

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    function search () {
        document.body.querySelectorAll('*').forEach(function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName; 
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

window.addEventListener('load', function () {
    var highlightButton = document.getElementById("highlight");

    // traverse downwards from rootEl while excluding Comment elements on IE6 7 & 8
    function traverseDOMFrom (rootEl, iterator) {
        if (!rootEl || rootEl.nodeType !== 1 || typeof iterator !== 'function') {
            return;
        }

        if (rootEl.children && rootEl.children.length > 0) {
            Array.prototype.slice.call(rootEl.children).forEach(function (el) {
                traverseDOMFrom(el, iterator);
            });
        }

        iterator(rootEl);
    }

    function search () {
        traverseDOMFrom(document.body, function (el) { 
            var spanEl = document.createElement('span');

            spanEl.innerHTML = el.tagName;
            spanEl.className = 'hoverNode';
            el.appendChild(spanEl); 
        });
    }

    highlightButton.addEventListener('click', search);
});

请注意，在这两种情况下，如果您希望在IE6、7和8上支持这些功能，则需要使用和的polyfill否则，您也可以通过使用自定义元素来迭代元素的数组来获得相同的结果。对于此

。addEventListener

，如果不需要支持多个侦听器，则可以使用一个简单的事件处理程序。

给定“每个body元素”实际上意味着“body中的每个元素”，您可以从一个元素开始并获取其所有子元素。循环子元素，如果有类型为1且有子节点，则使用该元素再次调用该函数

如果没有子节点，则转到下一个子节点，以此类推。下面只是一个在所有节点上递归并只选择类型1s的示例。您可以修改它以执行任何操作

//使用文档或HTML元素调用
函数checkBodyElements（节点）{
//递归函数
函数遍历体（节点）{
if（node.childNodes.length）{
//在每个子节点上循环
node.childNodes.forEach（child=>{
//如果是类型1，则递归调用该函数
if（child.nodeType==1）{
console.log（child.tagName，child.nodeType）
横木（儿童）；
}
});
}
}
//获取body元素
让body=node.querySelector（'body'）；
//如果找到主体元素，则遍历其子元素
如果（正文）{
横杆（体）；
}
}
window.onload=checkBodyElements（文档）





如果“每个body元素”实际上意味着“body中的每个元素”，则可以从一个元素开始，然后获取其所有子元素。循环子元素，如果有类型为1且有子节点，则使用该元素再次调用该函数

如果没有子节点，则转到下一个子节点，以此类推。下面只是一个在所有节点上递归并只选择类型1s的示例。您可以修改它以执行任何操作


//使用文档或HTML元素调用
函数checkBodyElements（节点）{
//递归函数
函数遍历体（节点）{
if（node.childNodes.length）{
//在每个子节点上循环
node.childNodes.forEach（child=>{
//如果是类型1，则递归调用该函数
if（child.nodeType==1）{
console.log（child.tagName，child.nodeType）
横木（儿童）；
}
});
}
}
//获取body元素
让body=node.querySelector（'body'）；
//如果找到主体元素，则遍历其子元素
如果（正文）{
横杆（体）；
}
}
window.onload=checkBodyElements（文档）





一个文档只能有一个HTML元素，并且只能是HTML元素的子元素。根据定义，主体元素是元素节点。所以你不需要递归就可以做到这一点。如果您只想查看文档中的每个元素，那么情况就不同了。除非“每个身体元素”实际上意味着“身体中的每个元素”？这是一个学校作业，需要使用递归。它特别要求我们导航DOM中的每个元素，对于主体中的每个元素，确定它是否是元素节点（nodeType==1）元素，然后向其中添加子节点。文档只能有一个HTML元素，并且只能是HTML元素的子元素。根据定义，主体元素是元素节点。所以你不需要递归就可以做到这一点。如果您只想查看文档中的每个元素，那么情况就不同了。除非“每个身体元素”实际上意味着“身体中的每个元素”？这是一个学校作业，需要使用递归。它特别要求我们导航DOM中的每个元素，对于主体中的每个元素，确定它是否是元素节点（nodeType==1）元素，然后向其中添加子节点。