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

我想获得商品，但我仍然获得了图例元素的所有文本内容

Answer 1

您只需要从所有元素子元素中找到TextNode子元素，就可以对所有childNodes进行迭代，并在节点类型与TextNode匹配时返回其{{1} }。

有关如何选择元素的TextNode子级的基于jQuery的解决方案，请参见this question-但我的示例演示了如何在普通ES中实现（通过childNodes上的for循环）：

textContext

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

Answer 2

您可以通过在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

Answer 3

您可以将<legend>标记的内容作为字符串获取，然后使用正则表达式删除其中的HTML标记及其内容。像这样：

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

正则表达式匹配第一个<字符及其后的所有内容。因此，我们将匹配项替换为空字符串''。

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

3 个答案: