查找某个类名的 table 中的所有 <th>

Question

我知道这很简单，但很难让它发挥作用。

我有一个包含两个 table 的页面，但我只想找到具有特定 class 名称的 table 的 <th> flexi-fruit.

例如：

<table class="flexi-fruit">
    <colgroup>
    <col>
    <col span="2">
    </colgroup>
    <tbody>
        <tr class="header-row">
            <th>
            </th>
            <th>&nbsp;Standard&nbsp;</th>
            <th>&nbsp;Exotic&nbsp;</th>
        </tr>
        <tr>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>
            <td>
            Blah
            </td>

        </tr>

    </tbody>
</table>

所以我想在 table 中找到名称为 class flexi-fruit 的所有 <th>。（然后做点什么）。

像这样的东西document.querySelectorAll('th.flexi-fruit')，显然是行不通的。

谢谢。

Answer 1

您只是选错了选择器。 document.querySelectorAll('table.flexi-fruit th')。这应该工作。您的选择器将匹配每个具有 class flexi-fruit.

的选项

Answer 2

您的 css 选择器顺序错误。参考css selector

document.querySelectorAll('table.flexi-fruit th')

查找某个类名的 table 中的所有 <th>

Find all <th> within a table of certain classname

css

css-selectors

document

getelementsbyname