Question

我是JavaScript新手。

我目前正在尝试为我们在工作中使用的网站（用于创建客户报价）编写一个chrome扩展程序，该扩展程序将“ parts”值和“ tax”值作为输入并将它们加在一起并输出“存款”值。

唯一的问题是DIV元素上没有ID来保存我需要的值。

我可以使用

引用“部件”值

document.getElementsByClassName ("col-xs-7 text-right")[2].innerText

因为“ parts”元素似乎始终是该类的第3个元素，但“ tax”元素却不在同一位置。有时它将是该类的第三个元素，有时它将是第5个，依此类推……我知道必须有更好的方法。 “ tax”元素看起来像：

<div _ngcontent-c11="" class="col-xs-6 text-right">
    <button _ngcontent-c11="" class="_button _blank _tiny"><i _ngcontent-c11="" class="fas fa-pencil"></i></button>
    <!---->
    <!---->
    $0.00
    <!---->
    </div>

（我认为编辑按钮不相关，但我想以防万一。）

和“ parts”元素看起来像：

<div _ngcontent-c11="" class="col-xs-7 text-right">$0.00</div>

Answer 1

谢谢大家的帮助！我能够遍历DOM树，从一个足以引用的父元素开始，然后向下钻取，直到找到所需的元素。

<div id="st-container" class="st-container">
  <div class="st-pusher">
    <nav class="st-menu st-effect-3" id="menu-3">
      <h2>Navigation</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="st-content">
      <div class="st-content-inner">
        <div class="main clearfix">
          <div id="st-trigger-effects" class="column">
            <button data-effect="st-effect-3">Click me</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

.getElementByClassName不可靠。我还能如何指向没有ID的HTML元素？

1 个答案: