获取div元素（不包括其子元素）的文本内容

Question

我有以下的html代码，我需要console.log只有航运。尝试了一些方法，但似乎无法奏效。我试着先选择它的孩子，然后打印出它的父母的文本内容-不行...我可以删除它的孩子，打印出剩下的东西，但我做不到。

有什么建议吗？

谢谢你的帮助

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

我试过这个：

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

我想得到发货，但我仍然得到图例元素的所有文本内容

Answer 1

您可以获得

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

正则表达式匹配第一个

Answer 2

您只需要从所有元素子节点中找到TextNode子节点，您可以通过迭代所有childNodes来完成，当节点类型与TextNode匹配时，返回其textContext。

有关如何选择元素的TextNode子节点的基于jQuery的解决方案，请参阅此问题-但我的示例显示了如何在vanilla ES中执行此操作（在子节点上使用for循环）：

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>

Answer 3

您可以通过迭代子节点（或者直接访问预期的节点）访问Text节点。

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

console.log(text);

看见https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes和https://developer.mozilla.org/en-US/docs/Web/API/Text