如何仅获取ul元素自身文本内容（排除li、a标签文本）

算力阿峰

2026-5-15

如何仅获取ul元素自身的文本内容？

我来帮你搞定这个问题！你现在碰到的情况是：用textContent或者innerText获取ul元素内容时，会把它内部所有子元素（比如li、a标签）的文本也一起返回，但你只需要ul自身的那部分文本。下面给你两种简单可行的实现方法：

方法一：筛选元素的文本子节点

DOM元素的子节点里，除了其他元素节点，还包含纯文本节点（比如ul里的" hey "）。我们可以遍历ul的所有子节点，只提取文本节点的内容：

const el = document.getElementById('a3');
let ulOwnText = '';

// 遍历ul的所有子节点
el.childNodes.forEach(node => {
  // 只处理文本节点（Node.TEXT_NODE对应的数值是3）
  if (node.nodeType === Node.TEXT_NODE) {
    // 剔除多余空格后拼接
    ulOwnText += node.textContent.trim() + ' ';
  }
});

// 清理结果末尾的空格
ulOwnText = ulOwnText.trim();
console.log(ulOwnText); // 输出 "hey"

这个方法的核心是识别文本节点，通过nodeType判断，只把ul自身的文本内容收集起来，完全忽略子元素。

方法二：克隆元素后清空子节点

另一种思路是先克隆目标ul元素，然后把克隆体的所有子元素都移除，剩下的就是ul自身的文本了：

const el = document.getElementById('a3');
// 深克隆ul元素（包含所有子节点）
const ulClone = el.cloneNode(true);

// 移除克隆体的所有子元素
while (ulClone.firstChild) {
  ulClone.removeChild(ulClone.firstChild);
}

// 现在克隆体的文本就是ul自身的内容
const ulOwnText = ulClone.textContent.trim();
console.log(ulOwnText); // 输出 "hey"

这种方法更直观，相当于给ul做了个“副本”，然后把副本里的子元素全部删掉，剩下的自然就是ul自己的文本了。