如何获取TH元素的顶级文本，排除其子节点中的文本？

嘿，这个困扰我太熟了！用innerText确实会把元素里所有层级的文本都扒出来，哪怕是子元素里的内容也会混进去，尤其是不知道冗余内容具体是什么的时候，固定截取长度完全不靠谱。这里有两个稳妥的方法帮你只拿到TH元素的顶级文本：

• 方法一：直接筛选顶级文本节点
  思路是遍历TH元素的所有子节点，只保留那些直接属于它的文本节点（排除子元素里的文本），然后把这些文本拼接起来：

  var th_elem = /* 你的元素获取逻辑 */;
  var my_text = Array.from(th_elem.childNodes)
    .filter(node => node.nodeType === Node.TEXT_NODE)
    .map(node => node.textContent.trim())
    .join(' ')
    .trim();
  

  解释下：childNodes会包含TH下的所有节点（文本、元素都算），我们过滤出nodeType为Node.TEXT_NODE的节点（也就是直接写在TH标签里的文本），然后把每个文本节点的内容去掉前后空格，再拼接成一个字符串，最后再整体trim一次，就能得到干净的顶级文本了。

• 方法二：克隆元素后移除所有子元素
  这个方法更直观：先克隆一份TH元素，然后把克隆体里的所有子元素都删掉，剩下的自然只有顶级文本了：

  var th_elem = /* 你的元素获取逻辑 */;
  var clonedTh = th_elem.cloneNode(true);
  // 循环移除所有子元素
  while (clonedTh.firstElementChild) {
    clonedTh.removeChild(clonedTh.firstElementChild);
  }
  var my_text = clonedTh.innerText.trim();
  

  这个方法不用纠结节点类型，适合新手理解，而且不管子元素嵌套多深，都能彻底清除掉它们的文本。

这两个方法都不需要提前知道冗余文本的内容，完全通用，你可以根据自己的代码场景选一个用～

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