如何选择特定元素后的所有文本节点答案

【问题标题】：How to select all text nodes after specific element如何选择特定元素后的所有文本节点
【发布时间】：2018-07-20 04:54:59
【问题描述】：

HTML：

<div class="someclass">
    <h3>First</h3> 
    <strong>Second</strong> 
    <hr>
    Third
    <br>
    Fourth
    <br>
    <em></em>
    ...
</div>

从上面的div节点我想得到hr之后的所有子文本节点（"Third"，"Fourth"，...可能还有更多）

如果我这样做了

document.querySelectorAll('div.someclass>hr~*')

我收到 NodeList [ br, br, em, ... ] - 没有文本节点

下面有

document.querySelector('div.someclass').textContent

我将所有文本节点作为单个字符串获取

我可以得到每个文本节点为

var third = document.querySelector('div.someclass').childNodes[6].textContent
var fourth = document.querySelector('div.someclass').childNodes[8].textContent

所以我尝试了

document.querySelector('div.someclass').childNodes[5:]  # SyntaxError

和slice()

document.querySelector('div.someclass').childNodes.slice(5)  # TypeError

那么有什么方法可以获取从hr 节点开始的所有子文本节点？

更新

我忘了说这个问题是关于网络抓取的，而不是网络开发的......我无法更改 HTML 源代码

【问题讨论】：

" 我得到 NodeList [ br, br, em, ... ] - 没有文本节点" 也许只是将文本放入 <p> 标签中，它们也会被返回？
@messerbill，对不起，我没有提到这个问题是关于网络抓取，而不是网络开发。我无法更改 HTML 源代码
S(".someClass").text()怎么样

标签： javascript web-scraping css-selectors

【解决方案1】：

您可以获取内容并使用 hr 拆分来获取 hr 之后的 html，然后在 div 中替换此内容，您将能够操纵此 div 来获取您的内容：

var content = document.querySelector('.someclass').innerHTML;
content = content.split('<hr>');
content = content[1];

document.querySelector('.hide').innerHTML = content;
/**/

var nodes = document.querySelector('.hide').childNodes;
for (var i = 0; i < nodes.length; i++) {
  console.log(nodes[i].textContent);
}

.hide {
  display: none;
}

<div class="someclass">
  <h3>First</h3>
  <strong>Second</strong>
  <hr> Third
  <br> Fourth
  <br>
  <em></em> ...
</div>
<div class="hide"></div>

【讨论】：