Excluding child class from getElementsByClassName

Question

A webpage has this structure, and I want all the text content of the class called "post-entry", except for one child class under it. I've marked the unwanted text as "EXCLUDE THIS":

<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>

I've been using the following code to get the data I want, it works fine, except it includes the part I've labeled as "EXCLUDE THIS" in the previous example.

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);

Some of the solutions I've searched return "Cannot read property 'innerText' of undefined" when implemented or something alike. Either I can't get the syntax right, or the tested solutions haven't been the right ones for the task. I'm pretty sure there is a syntax for this in javascript without jQuery.

So how do I exclude that one child class?

Thanks in advance.

Answer 1

You'll need to target the identifier (the element class/tag/id) and specifically exclude it. In your code above the identifier will be the scroll-top class

// 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>