无法获取querySelector中某个类的元素
我似乎无法在“总计”部分的"span“标签中提取价格。这真的很奇怪，因为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>
回答 2
Stack Overflow用户
发布于 2020-07-03 21:20:48
看起来这是<tbody>元素缺少必需的<table>元素作为其父元素的问题：
<table>
<tbody>
<!-- Contents of tbody -->
</tbody>
</table>或者，您应该用<table>元素替换<tbody>元素：
<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中检索返回元素列表中第一个元素的内部超文本标记语言)：
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>
Stack Overflow用户
发布于 2020-07-03 21:11:28
实际上，getElementsByClassName返回一个元素数组。您必须通过其类名获取span元素，如下所示：
var total = document.querySelector("tbody").getElementsByClassName("price");
console.log(total[index].innerHTML); // total is an array of "price" class spanhttps://stackoverflow.com/questions/62716081
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号