javascript - 在 tbody 中选择节点及其所有子节点

Question

我想选择

中的所有元素及其所有子元素，以便我可以使用 javascript 更改一个类。

例如，我想在下面的例子中将类 cl1 更改为 cl2

<table>
    <thead>
         ....
    </thead>
    <tbody id="my-table">
        <tr class="cl1 other-class">
            <td>Some value</td>
            <td class="cl1 other-class">Some value</td>
            <td>Some value</td>
        </tr>
        <tr class="cl1 other-class">
            <td class="cl1 other-class">Some value</td>
            <td>Some value</td>
            <td>
                <a class="cl1 link" href="#">Some link</a>
            </td>
        </tr>
    </tbody>

我想为此使用 javascript，没有 jQuery

我设法像这样选择

内的所有元素：

document.getElementById("my-table").tBodies.item(0)

但我不知道如何选择它们的每个子元素或它们的子子元素。

为了改变类，我知道我可以使用正则表达式来替换类

【问题讨论】：

• 发布您迄今为止尝试过的代码。 SO 不是免费的编码服务。我们可以帮助您解决您在代码中遇到的问题，但我们不会为您编写代码。
• 如果只是为了转课，也许document.getElementsByClassName()可以帮上忙。然后遍历返回的元素并设置类属性。
• @RacilHilan 完成
• @Vasan 我想到了，但我在表格之外还有其他 html 标签，我不想替换相同的类

Answer 1

可能重复How to select all children of an element with javascript and change CSS property?

尝试（在您的 tbody 中添加一个 ID 以使其正常工作）

var descendants = document.getElementById('tbody').getElementsByTagName("*");
for(var i = 0; i < descendants.length; i++) {
    descendants[i].classList.remove('cl1');
    descendants[i].classList.add('cl2');
}

Answer 2

您说您设法选择了<tbody> 元素，但您想知道如何选择它的子元素或其子子元素。您可以使用每个元素具有的 children 属性来做到这一点。所以这条线给了你<tbody>的所有孩子，它们是<tr>（行）：

document.getElementById("my-table").tBodies.item(0).children;

然后，如果你得到每一行的孩子，你就会得到单元格。示例：

var tbody = document.getElementById("my-table").tBodies.item(0);
var rows = tbody.children;
var row1cells = rows[0].children;
var row2cells = rows[1].children;