如何遍历嵌套的 DOM 树

Question

我正在尝试获取标签的 innerHTML 或 value（取决于标签），但不确定如何循环嵌套的子标签。我希望在标签中仅包含“World”时将样式应用于标签。这是 fiddle link。 smb 可以帮忙吗？

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h2>Iterave over Children of HTML Element using JavaScript</h2>
    <div id="myElement">
        <p>Hello <span>World</span>!</p>
        <ul>
          <li>List Item</li>
         </ul>
        <div>
          Sample World
          <div>
            Nested Div
               <div>
                 Another Nested Div with World
               </div>
          </div>
        </div>
    </div>
    <br>
    <button type="button" onclick="execute()">Click Me</button>
    <p id="out"></p>
    <script>
    function execute(){
        var element = document.getElementById("myElement");
        var children = element.children;
        for(var i=0; i<children.length; i++){
            var child = children[i];
            console.log(child)
            if (child.innerHTML.includes("World"))
                child.style.color = "red";
        }
    }
    </script>
</body>
</html>

Answer 1

在我看来，这个解决方案相当简单，因为 innerHtml 和 innerText return 所有子节点文本也是如此。首先，我会做一个递归解决方案——查看所有这些子节点的内部。由于我们只需要父节点的文本 - 我们必须删除节点的所有子节点。而且我们必须在不更改 DOM 的情况下进行操作 - 克隆元素将在此处给出答案。第三个问题出现在涉及到父节点样式也适用于子节点时——我将使用一个助手 css class 来使文本保持黑色。

function recursive_execute(el){ 
var element; //out target element
    if(!el){ //if nothing is passed to function we take the root: `myElement`
        element = document.getElementById("myElement");
  }
  else{
    element = el; 
  }
  var children = element.children; 
  if(children.length > 0){
    for(let i = 0; i < children.length; i++){
        let child = children[i];
      recursive_execute(child); //call function for all children of the target element
    }
  }
  
  let item = element.cloneNode(true); //cloning target node
  if(item.children && item.children.length > 0){
    for(let i = 0; i < item.children.length; i++){
        let child = item.children[i];
      if(child.tagName){ //getting rid of children who are tagged (so we don't get rid of text)
        item.removeChild(child);
      }
    }
  }
  if(item.innerHTML && item.innerHTML.includes("World")){ //check if our clone contains the desired word
    element.style.color = "red"
  }else{
    element.className = "helper" //if not - assigning helper class
  }
}

.helper{
  color:black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h2>Iterave over Children of HTML Element using JavaScript</h2>
    <div id="myElement">
        <p>Hello <span>World</span>!</p>
        <ul>
          <li>List Item</li>
         </ul>
        <div>
          Sample World
          <div>
            Nested Div
               <div>
                 Another Nested Div with World
               </div>
          </div>
        </div>
    </div>
    <br>
    <button type="button" onclick="recursive_execute()">Click Me</button>
    <p id="out"></p>
</body>
</html>

如何遍历嵌套的 DOM 树

How to loop through the nested DOM tree

javascript

dom