如何遍历嵌套DOM树，为包含指定内容的标签添加样式

问题原因 #

你现有代码仅遍历了#myElement的一级直接子节点，没有递归处理深层嵌套的子元素，因此无法匹配到内部嵌套的span、多层div等元素。同时取值逻辑没有区分元素类型，也容易出现误匹配。

解决方法 #

使用递归遍历所有层级的子元素，同时根据标签类型判断取值逻辑，代码修改如下：

function execute() {
  const rootElement = document.getElementById("myElement");

  // 递归遍历元素的工具函数
  function traverseNestedElement(el) {
    let targetContent = "";
    // 表单可输入类元素取value属性
    if (["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName)) {
      targetContent = el.value;
    } else {
      // 普通元素取textContent，避免匹配到HTML标签内部的字符串
      targetContent = el.textContent.trim();
    }

    // 匹配到对应字符串时添加样式
    if (targetContent.includes("World")) {
      el.style.color = "red";
    }

    // 递归遍历当前元素的所有子元素
    for (const child of el.children) {
      traverseNestedElement(child);
    }
  }

  traverseNestedElement(rootElement);
}

可选优化：如果不需要父级元素连带染色（比如示例中p标签和内部span标签都包含World，默认会同时变红），可以调整匹配规则，仅对文本节点直接包含World的最内层元素添加样式即可。

内容的提问来源于stack exchange，提问作者lopp