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

Question

I want to select all elements inside < tbody > and all their sub-elements so i can change a class using javascript.

For example, i want to change the class cl1 into cl2 in the following example

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

I want to use javascript for this, no jQuery

i managed to select all elements inside < tbody > like this :

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

but i didn't know how to select each of their sub-elements or their sub-sub-elements.

for changing the class, i know i can use regular expressions to replace the class

Answer 1

Possible duplicate How to select all children of an element with javascript and change CSS property?

try (add an id to your tbody to make this work)

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

You said you managed to select <tbody> element, but you wanted to know how to select it's sub-elements or their sub-sub-elements . You do that with the children property which each element has. So this line gives you all children of <tbody> which are the <tr> (rows):

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

Then if you get the children of each row, you get the cells. Example:

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