使用javascript从HTML表中获取元素

This is my HTML

这是我的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>​

I tried the script below, but this is returning the full html.

我尝试了下面的脚本，但这是返回完整的HTML。

document.getElementsByClassName("product name")

How can i make it work so that it would return productX and productY in an array?

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

please let me know thanks

请让我知道，谢谢

5 个解决方案

#1

Classes cannot contain spaces, so class=​"product name" is actually two classes: product and name.

类不能包含空格，因此class =“product name”实际上是两个类：product和name。

Given your current HTML, you can use document.querySelectorAll('.product.name:not(.style1)') to grab the elements with classes product and name, while excluding those having class style1.

鉴于您当前的HTML，您可以使用document.querySelectorAll（'。product.name:not(.style1）'）来获取具有类产品和名称的元素，同时排除具有类style1的元素。

You can iterate through this list, grabbing the text content of each element like so:

您可以遍历此列表，抓取每个元素的文本内容，如下所示：

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>

#2

please try this one

请试试这个

var x = Array.from(document.querySelectorAll(".product.name:not(.style1)"));

console.log(x);

<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>

#3

var elements = document.getElementsByClassName("product name") creates and array of elements with class name product name. Then you can acces this array like this elements[0]...etc.

var elements = document.getElementsByClassName（“product name”）创建具有类名称产品名称的元素数组。然后你可以像这个元素[0] ...等访问这个数组。

Product name must be one word product-name because now your td has 3 classes

产品名称必须是单词product-name，因为现在您的td有3个类

#4

In your example, you have 2 classes applied to elements with class="product name". The first class is product and the second class is name. In HTML, multiple CSS classes are separated by spaces. Instead, try to use "product_name" (with an underscore).

在您的示例中，您有2个类应用于具有class =“product name”的元素。第一类是产品，第二类是名称。在HTML中，多个CSS类由空格分隔。相反，尝试使用“product_name”（带下划线）。

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>​

Javascript:

document.getElementsByClassName("product_name")

#5

Add something like product-item as classname to your product elements:

将product-item作为classname添加到产品元素中：

var products = document.getElementsByClassName("product-items");
for (var i = 0; i<products.length; i++) {
    console.log(products[i].innerText);
}