从getElementsByClassName中排除子类

时间:2019-01-14 09:29:20

标签: javascript html getelementsbyclassname

一个网页具有这种结构,我希望该类的所有文本内容都称为“ post-entry”,但下一个子类除外。我已将不需要的文本标记为“排除此”:

<div class="post-entry">
    <p><em></em></p>
    <p><em>INCLUDE THIS</em></p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p><em></em></p>
    <blockquote></blockquote>
    <h4></h4>
    <p><em></em></p>
    <p>&nbsp;</p>

    <span class="scroll-top">
        <a href="#scroll-top" title="Go to top"><span class="dashicons dashicons-arrow-up-alt2 top"></span>EXCLUDE THIS</a>
    </span>
</div>

我一直在使用以下代码来获取所需的数据,它工作正常,但其中包括在上一示例中被标记为“排除此部分”的部分。

var contentElem = document.getElementById('content');
var titleText = contentElem.getElementsByClassName('entry-title');
var entryText = contentElem.getElementsByClassName('post-entry');

var textToLog = titleText[0].innerText + "\n\n" + entryText[0].innerText; 
console.log(textToLog);

我搜索过的某些解决方案在实现时返回“ 无法读取未定义的属性'innerText'” 。我可能语法不正确,或者经过测试的解决方案不适用于该任务。我很确定javascript 没有jQuery时有一种语法。

那么,如何排除一个孩子班呢?

谢谢。

1 个答案:

答案 0 :(得分:0)

您需要定位标识符(元素类/标签/ id)并明确排除它。在您的代码上方,标识符为scroll-top

// post-entry element
var postEntry = document.getElementsByClassName('post-entry')[0];

// get 1st level (direct) children under post-entry div
var postEntryChildren = postEntry.childNodes;

var content = '';
for(var i =0;i<postEntryChildren.length;i++){
  // check if the textContent is not empty and the className is not 'scroll-top' which includes the text to be excluded
  if(postEntryChildren[i].textContent && postEntryChildren[i].textContent.trim() && postEntryChildren[i].className !== 'scroll-top'){
    if(content) content += '\n';
    content += postEntryChildren[i].textContent
  }
}

console.log(content);
<div class="post-entry">
    <p><em></em></p>
    <p><em>INCLUDE THIS</em></p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p>INCLUDE THIS</p>
    <p><em></em></p>
    <blockquote></blockquote>
    <h4></h4>
    <p><em></em></p>
    <p>&nbsp;</p>

    <span class="scroll-top">
        <a href="#scroll-top" title="Go to top"><span class="dashicons dashicons-arrow-up-alt2 top"></span>EXCLUDE THIS</a>
    </span>
</div>