Question

我似乎无法在“总计”部分的“跨度”标签中提取价格。真的很奇怪，因为getElementsByTagName返回null吗？

var total = document.querySelector("tbody").getElementsByClassName("grand totals");
console.log(total.innerHTML);

<tbody>

  <tr class="totals sub">
    <th data-bind="i18n: title" class="mark" scope="row">Subtotal</th>
    <td class="amount">
      <span class="price" data-bind="text: getValue(), attr: {'data-th': title}" data-th="Subtotal">£524.00</span>
    </td>
  </tr>


  <tr class="totals-tax">
    <th data-bind="text: title" class="mark" colspan="1" scope="row">Tax</th>
    <td data-bind="attr: {'data-th': title}" class="amount" data-th="Tax">
      <span class="price" data-bind="text: getValue()">£104.80</span>
    </td>
  </tr>

  <tr class="grand totals">
    <th class="mark" scope="row">
      <strong data-bind="i18n: title">Order Total</strong>
    </th>
    <td data-bind="attr: {'data-th': title}" class="amount" data-th="Order Total">
      <strong><span class="price" data-bind="text: getValue()">£628.80</span></strong>
    </td>
  </tr>
</tbody>

Answer 1

您的<tbody>元素缺少必需的<table>元素作为其父元素，这似乎是一个问题：

<table>
  <tbody>
    <!-- Contents of tbody -->
  </tbody>
</table>

或者，您应将<tbody>元素替换为<table>元素：

<table>
  <!-- Contents of table -->
</table>

正如@JesusPacheco的回答所指出的，Element.getElementsByClassName返回一个元素数组，如MDN文档中所述：

Element方法getElementsByClassName()返回一个实时HTMLCollection，其中包含具有指定类名称的每个后代元素。

（注意：Document.getElementsByClassName等同于Element.getElementsByClassName）

因此，您必须访问指定的索引才能检索其属性：

// NOTE: This is demo code!
var els = document.getElementsByClassName('my-class another-class');
// Retrieve the length of els:
console.log(els.length);
// Access the first element's inner HTML:
console.log(els[0].innerHTML);

更新的代码段（我假设您打算从getElementsByClassName检索返回元素列表中第一个元素的内部HTML）：

var total = document.querySelector("tbody").getElementsByClassName("grand totals");
// getElementsByClassName returns an array, so you can't just
// log the inner HTML
// console.log(total.innerHTML);
console.log(total[0].innerHTML);

<table>
  <tbody>

    <tr class="totals sub">
      <th data-bind="i18n: title" class="mark" scope="row">Subtotal</th>
      <td class="amount">
        <span class="price" data-bind="text: getValue(), attr: {'data-th': title}" data-th="Subtotal">£524.00</span>
      </td>
    </tr>


    <tr class="totals-tax">
      <th data-bind="text: title" class="mark" colspan="1" scope="row">Tax</th>
      <td data-bind="attr: {'data-th': title}" class="amount" data-th="Tax">
        <span class="price" data-bind="text: getValue()">£104.80</span>
      </td>
    </tr>

    <tr class="grand totals">
      <th class="mark" scope="row">
        <strong data-bind="i18n: title">Order Total</strong>
      </th>
      <td data-bind="attr: {'data-th': title}" class="amount" data-th="Order Total">
        <strong><span class="price" data-bind="text: getValue()">£628.80</span></strong>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

实际上，getElementsByClassName返回一个元素数组。您必须按其类名获取span元素，如下所示：

var total = document.querySelector("tbody").getElementsByClassName("price");
console.log(total[index].innerHTML); // total is an array of "price" class span

无法在querySelector中获取某个类的元素

2 个答案: