javascript - select nodes and all their child nodes inside 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

Post the code you've attempted so far. SO is not a free coding service. We can help you with issues you're facing in your code, but we won't code for you. — Racil Hilan, Oct 28 '17 at 15:55
If it is only for changing class, maybe `document.getElementsByClassName()` can help. Then iterate over the elements returned and set class attribute. — Vasan, Oct 28 '17 at 16:00
@Vasan i thought of that but i have other html tags outside the table with the same class that i don't want to replace — user93200, Oct 28 '17 at 16:03

score 2 · Accepted Answer · answered Oct 28 '17 at 16:17

2

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');
}

answered Oct 28 '17 at 16:17

mastaH

1,234
3
15
30

it's not duplicate, but your answer is just what i need, i managed to solve my problem like this : document.getElementById("my-table").tBodies.item(0).getElementsByTagName("*"); this line gave every tag inside the tbody which is exactly what i need , thanks a lot – user93200 Oct 28 '17 at 16:32

score 0 · Answer 2 · answered Oct 28 '17 at 16:26

0

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;

answered Oct 28 '17 at 16:26

Racil Hilan

24,690
13
50
55

and what if the number of rows change, i have to change my code and adapt it which is not a good thing to do – user93200 Oct 28 '17 at 16:40
No, you don't change your code, you loop through the children. The code in my answer is just an example. After the second line where you get the rows, you loop through them to get the children cells. Now it doesn't matter if the number of rows or cells change, your code will still get them all. – Racil Hilan Oct 28 '17 at 17:09

javascript - select nodes and all their child nodes inside tbody

2 Answers2