如何定位特定节点？答案

【问题标题】：How can I target a specific node?如何定位特定节点？
【发布时间】：2022-09-28 17:22:28
【问题描述】：

我的设置如下。

它正在工作，我只是有一个小问题。目前它正在检查文本的子注释（node.nodeType === 3）。问题是，有时有 f.e.链接或段落中的文本很强大，它们也被删除了。

基本上我想做的是：定位（计数）段落中不是休息的所有内容。或者换句话说是这样的： if(node.nodeType !== br)

一个例子看起来像这样：

<p>
  \"Text\"
  <br>
  <br>
  <strong>
  \"Text2\"

目前，该脚本将查看两个文本之间的 3 个元素，并从 Text2 中删除强元素，但这不是我想要的。它应该只计算段落而不是其他任何东西。

有人可以帮帮我吗？

const mediaQuery = window.matchMedia(\'(max-width: 468px)\')
// Check if the media query is true
if (mediaQuery.matches) {
  const paragraphs = document.querySelectorAll(\"p\");

paragraphs.forEach( elem => {
  const nodes = [...elem.childNodes];
  nodes.reduce((count, node) => {
    if(node.nodeType === 3) {
      const isEmpty = node.nodeValue.trim().length === 0;
      return isEmpty ? count : 0; 
    }
    count++;
    if (count>2) node.remove();
    return count;
  }, 0);
});
  
}

您能否在您的问题中添加一个输入示例和一个输出示例？
好吧，如果您想测试<br> 元素，为什么不这样做呢？ node.nodeName != \'BR\'
如果对返回值不做任何事情，为什么还要使用reduce？
@Djave 我在描述中添加了一个示例
我们在数什么？字符数或数字或换行符？

标签： javascript nodes line-breaks

【解决方案1】：

您可以在本章末尾的“段落”部分找到一些常见任务的秘诀。也许这涵盖了您当前的需求，但是如果您阅读全文，您会得到更多。

底层的 Range 和 Selection 对象很容易掌握，然后你就不需要任何配方来让它们做你想做的事。

如果“段落”跨越行尾，我们可以将它连字符连接起来。

我想“段落”有助于解决那里的问题。一些有问题的长字符串不是“段落”，因此不能指望它来解决所有溢出问题。

【讨论】：

【解决方案2】：

为了计算所有不中断的元素，您就快到了，尽管您的示例中似乎有很多不需要的额外代码。

nodeName 是您要用来检查某物是否为 br 的那个。这是标记的大写版本，因此<br/> 具有nodeName 的BR。

如果我要计算段落中不是<br/> 的所有内容，我会执行以下操作：

const paragraphs = document.querySelectorAll("p");

let count = 0;
paragraphs.forEach( para => {
  const nodes = [...para.childNodes];
  nodes.forEach(node => {
    if(node.nodeName != "BR"){
      count ++;
    }
  })
});

console.log(count);

<p>
  text
  <br>
  <br>
  hello world!
  <strong>this is bold</strong>
  yeah yeah
  whatever :)
  <span>something else</span>
</p>

我想我正在回答你的问题，但如果没有，请告诉我。

【讨论】：