javascript - 使用 javascript 从 HTML 表中获取元素

Question

这是我的HTML

<td class=​"style1 product name" valign=​"top" nowrap>23$​</td>​, 
<td style=​"padding-left:​10px;​" class=​"product name" width=​"85%">productY</td>​
<td class=​"style1 product name" valign=​"top" nowrap>​10$​</td>​, 
<td style=​"padding-left:​10px;​" class=​"product name" width=​"85%">productX</td>​

我尝试了下面的脚本，但它返回了完整的 html。

document.getElementsByClassName("product name")

我怎样才能让它工作，以便它返回数组中的 productX 和 productY？

请告诉我谢谢

Answer 1

类不能包含空格，所以class= "product name"实际上是两个类:product和name。

鉴于您当前的 HTML，您可以使用 document.querySelectorAll('.product.name:not(.style1)') 获取具有类 product 和name，同时排除具有 style1 类的那些。

您可以遍历此列表，像这样获取每个元素的文本内容:

var products = document.querySelectorAll('.product.name:not(.style1)'),
    a = [],
    i;

for(i = 0 ; i < products.length ; i++) {
  a.push(products[i].textContent);
}

console.log(a);

<table>
  <tr>
    <td class="style1 product name" valign="top" nowrap>23$</td>
    <td style="padding-left:10px;" class="product name" width="85%">productY</td>
    <td class="style1 product name" valign="top" nowrap>10$</td>
    <td style="padding-left:10px;" class="product name" width="85%">productX</td>
  </tr>
</table>