javascript - 获取不包括其子元素的 div 元素的文本内容

Question

我有以下 HTML 代码，我只需要 console.log 运送。我尝试了几种方法，但似乎无法正常工作。我尝试先选择它的子项并打印出其父项的 textContent - 不行。我可以删除它的子项并打印出剩下的内容，但我不能那样做。

有什么建议吗？

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

我想获取 Shipping，但我仍然获取了图例元素的所有文本内容。

Answer 1

您可以通过遍历 accordionTitle 变量的子节点(或直接访问目标节点)来访问 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