求助大佬 js 怎么获取节点下所有子节点的文本并存到数组中?

<ul id="test">
    <li>第一级</li>
    <li>
        <p>第二级</p>
        <div>
            <p>第三级</p>
            <div>
                <p>第四级</p>
            </div>
        </div>
    </li>
    <li>
        hello word
        <span>&nbsp;&nbsp;</span>
    </li>
</ul>

假设有这么一段html代码,如何获取ul元素下所有子元素的文本,并存到数组中,我尝试用textContent获取,然后用split(/\s+/)分割成数组,它会把hello word也分割了 我想要的效果是
["第一级","第二级","第三级","第四级","hello word"]

阅读 1.9k
2 个回答
const test = document.getElementById("test");
const list = [...test.querySelectorAll("li,p")]   // 找到所有 li 和 p(包含文本的
                // 找他们的子节点(可能是文本,也可能是 Element),然后把文本 过滤出来
    .flatMap(el => [...el.childNodes].filter(n => n.nodeType === Node.TEXT_NODE))
    // 取 textContent,并且去掉首尾空白(包括空格、回车换行等)
    .map(node => node.textContent.trim())
    // 过滤有效字符(非空)
    .filter(text => text);
console.log(list);

那你不能拿 textContent ,而是应该是 childNodes

  1. children 继承的是 HTML 接口, 不包含文本节点
  2. childNodes 继承的是 Node 接口,包含文本节点

如果你只有文本,那么问题其实是语法分析了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏