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

Question

我需要使用递归来导航 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 并将子节点附加到每个元素。

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>