Getting text content of a div element excluding its children

Question

I have the following HTML code and I need to console.log only Shipping. I tried a few methods but can't seem to get it to work. I tried selecting first its children and printing out the textContent of its parent - no go. I could delete its children and print out what's left but I can't do that.

Any suggestions?

<div class="accordion shadowed-box shipping collapsed summary">
  <fieldset>
    <legend>
    Shipping
        <div id="shippingTooltip" class="form-field-tooltip cvnship-tip" role="tooltip">
          <span class="tooltip">
            <div class="tooltip-content" data-layout="small tooltip-cvn">
              <div id="cart-checkout-shipping-tooltip" class="html-slot-container">
                <p>We ship UPS, FedEx and/or USPS Priority Mail.<br>  
                  <a class="dialogify" data-dlg-options="{&quot;height&quot;:200}" href="https://www.payless.com/customer-service/ordering-and-shipping/cs-ordering-shipping-schedule.html" title="shipping information">Learn more about our shipping methods and prices.</a>
                </p>    
              </div> 
            </div>
          </span>
        </div>
      <a href="javascript:app.checkout.editShipping();" id="section-header-note-sa" class="section-header-note" style="display: inline;">Edit</a>
    </legend>
  </fieldset>
</div>

I tried this:

var accordionChildren = document.querySelector('.accordion.shadowed-box.shipping>fieldset>legend *');//selects the first child
var accordionTitle = accordionChildren.parentElement;
var text = accordionTitle.textContent;
console.log(text);

I want to get Shipping but instead I get still all the text contents of the legend element.

thanks just edited it... I explained what I did let me know if thats enough or if you would prefer me putting the js code — Yann B, Jul 29 '18 at 09:31
Yes go ahead and add the expected output of the `console.log` :) — aloisdg, Jul 29 '18 at 09:37

score 3 · Accepted Answer · answered Jul 29 '18 at 09:58

you can access Text nodes by iterating over the child nodes (or access the intended node directly) of the accordionTitle variable.

let textNode = accordionTitle.childNodes[0],
    text = textNode.textContent;

console.log(text);

See https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes and https://developer.mozilla.org/en-US/docs/Web/API/Text

score 2 · Answer 2 · answered Jul 29 '18 at 09:53

You just need to find the TextNode child from all of the elements children, you do this by iterating over all of the childNodes and when the node type matches TextNode, return its textContext.

For a jQuery based solution on how to pick the TextNode child of an element see this question - but my example shows how to do it in vanilla ES (with a for loop over childNodes):

Object.defineProperty(HTMLElement.prototype, 'onlyTextContent', {
  enumerable: false,
  configurable: false,
  get: function() {
    for(let i = 0; i < this.childNodes.length; i++) {
      if(this.childNodes[i].nodeType === Node.TEXT_NODE) {
        return this.childNodes[i].textContent.trim();
      }
    }
    return null;
  }
});

document.addEventListener('DOMContentLoaded', function() {
  console.log(
    document.getElementById('legend1').onlyTextContent
  );
});

<div class="accordion shadowed-box shipping collapsed summary">
  <fieldset>
    <legend id="legend1">
    Shipping
        <div id="shippingTooltip" class="form-field-tooltip cvnship-tip" role="tooltip">
          <span class="tooltip">
            <div class="tooltip-content" data-layout="small tooltip-cvn">
              <div id="cart-checkout-shipping-tooltip" class="html-slot-container">
                <p>We ship UPS, FedEx and/or USPS Priority Mail.<br>  
                  <a class="dialogify" data-dlg-options="{&quot;height&quot;:200}" href="https://www.payless.com/customer-service/ordering-and-shipping/cs-ordering-shipping-schedule.html" title="shipping information">Learn more about our shipping methods and prices.</a>
                </p>    
              </div> 
            </div>
          </span>
        </div>
      <a href="javascript:app.checkout.editShipping();" id="section-header-note-sa" class="section-header-note" style="display: inline;">Edit</a>
    </legend>
  </fieldset>
</div>

Álvaro Tihanyi · Answer 3 · 2018-07-29T10:17:08.847

You can get the contents of the <legend> tag as a string and then use a regular expression to remove the HTML tags and their content inside. Like this:

let legends = document.querySelector('.accordion.shadowed-box.shipping>fieldset>legend');
let title = legends.innerHTML.replace(/<.*/s, '');
// title = "Shipping"

The regular expression matches the first < character and everything that follows. So we replace that match with an empty string ''.

Getting text content of a div element excluding its children

3 Answers3

Related