如何在ul中仅打印li的指定文本而非嵌套p的内容？

问题根源 #

HTML结构里的换行、空格会被解析成空白文本节点，直接用firstChild大概率拿到的是这些空白内容，而非li里的目标文本，导致后续判断逻辑无法触发。

可行解决方案 #

方案1：筛选li的直接文本节点 #

遍历li的所有子节点，筛选出非空白的文本节点，提取并整理内容：

const lis = document.querySelectorAll('#list li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    const validTextNodes = Array.from(this.childNodes).filter(node => {
      return node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '';
    });
    const choice = validTextNodes.map(n => n.textContent.trim()).join('');
    console.log(choice);
    // 这里写入你的判断逻辑
  });
});

方案2：克隆节点后移除p标签 #

克隆当前li节点，移除其中的p标签，再提取剩余文本（适合li内文本分散在p前后的情况）：

const lis = document.querySelectorAll('#list li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    const liClone = this.cloneNode(true);
    liClone.querySelectorAll('p').forEach(p => p.remove());
    const choice = liClone.textContent.trim();
    console.log(choice);
    // 判断逻辑
  });
});

方案3：遍历子节点寻找第一个有效文本 #

如果目标文本是li里第一个非空白的文本内容，可以逐个遍历子节点找到它：

const lis = document.querySelectorAll('#list li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    let choice = '';
    let currentNode = this.firstChild;
    while (currentNode) {
      if (currentNode.nodeType === Node.TEXT_NODE && currentNode.textContent.trim()) {
        choice = currentNode.textContent.trim();
        break;
      }
      currentNode = currentNode.nextSibling;
    }
    console.log(choice);
    // 判断逻辑
  });
});

内容的提问来源于stack exchange，提问作者Joe.sexton