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

Question

我需要使用递归来导航DOM中的每个元素，并且对于每个主体元素，确定它是否是一个元素节点。如果是，我需要向其添加一个子节点。我需要为此任务使用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并将该子节点附加到每个元素。

Answer 1

给出“每个身体元素”实际上是指“身体中的每个元素”，您可以从一个元素开始并获取其所有子元素。循环遍历子元素，如果有任何类型为1且具有子节点的子元素，则使用元素再次调用该函数。

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

// Call with a document or HTML element
function checkBodyElements(node) {

  // Recursive function
  function traverseBody(node) {

    if (node.childNodes.length) {

      // Loop over every child node
      node.childNodes.forEach(child => {

        // If it's a type 1, call the function recursively
        if (child.nodeType == 1) {
          console.log(child.tagName, child.nodeType)
          traverseBody(child);
        }
      });
    }
  }

  // Get the body element      
  let body = node.querySelector('body');
  
  // If a body element was found, traverse its children
  if (body) {
    traverseBody(body);
  }
}

window.onload = checkBodyElements(document);

<div>
  <div>
    <p><span></span>
    </p>
  </div>
  <div>
    <p><span></span>
    </p>
  </div>

</div>

Answer 2

除了支持IE6和7之类的较旧的浏览器以外，是否有任何特定的原因暗示着创建递归函数。

[如果否

，您可以简单地使用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);
});
如果是，或者您需要支持IE6和7这样的浏览器，则可以选择：

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 (typeof iterator !== 'function' || !rootEl || rootEl.nodeType !== 1) {
            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);
});