在控制台中获取表td的内容

Question

这证明是非常棘手的。附件是我想要的DOM屏幕：

我想要带有类产品价格的td的innerHTML（或者至少我认为我做过）。

这是我尝试的所有内容和输出的另一个屏幕：

如何让控制台返回$ 59.99？重要的是它来自第一个元素而不是第二个元素，其中59.99也存在

发表评论后，这里是更广泛的HTML：

<table cellspacing="1" class="store_location_list">


            <tr>
                <th class="item-type">Item<br />Type</th>
                <th class="item-desc">Item<br />Description</th> 
                <th class="total-qty">Total<br />Quantity</th>
                <th class="product-price">Product<br/>Price</th>
                <th class="total-price">Total<br/>Price</th>
                <th class="removeItemLink"> </th>
            </tr>

            <tr>
                <td class="item-type">Metal Wall Art</td>
                <td class="product-description-long">Metal Wall Art</td>
                <td class="total-qty">1</td>

         <!-- ************************************** -->       
                <td class="product-price">$59.99</td>
                <td class="total-price">$59.99</td>
                <td class="removeItemLink"><a href="#" onclick="__doPostBack('order_summary_remove_product', 'RetailerProductID_137'); return false;">Remove</a></td>
            </tr>


</table>

Answer 1

使用：

document.querySelectorAll('.product-price')[1].innerHTML

<强> jsFiddle example

querySelector仅返回第一个匹配，而querySelectorAll返回所有这些（因此[1]）表示法以获取第二个元素。您也可以使用textContent  取而代之的是innerHTML，因为它的工作速度要快一些，但你不会注意到你的情况会有太大差异。

Answer 2

  

document.querySelector（ 'td.product价格'）。innerHTML的

Answer 3

document.querySelectorAll('.product-price')

将返回给定类的元素数组。

document.querySelectorAll('.product-price')[n]

将为您提供第（n + 1）个元素

.innerHTML：会在其中提供html内容，即使是标签。

.textContent：只会给你文字，没有html标签。

Answer 4

你想要的是属性：innerText和innerHTML。 但是你正在选择正确的项目。您选择具有product-price类的所有元素，并且表的标题具有该类。 我建议您先确保选择正确的项目。