如何获得像 td 这样的嵌套 js 选择器？

Question

I need to get all selector that match the condition so I can iterate thru it later on. My code does not return any values. Probably syntax is wrong so I would appreciate if you help me (haven't written lots in js).

Here is the html

function restore_hp(){

    var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing > tr > td[2]");
    percent_restore.forEach((td)=>{
        console.log(td.innerText)
    });

}

Answer 1

You are probably looking for td:nth-child(2) at the end of your selector.

Your current td[2] would select such a table cell: <td 2="some-attribute-value">...</td> . Notice that this would be invalid HTML because a) 2 is an invalid attribut identifier (cannot start with a number) and b) even if it in general would be valid syntax it wouldn't be known for HTMLTableCellElement , and thus again, invalid HTML.

2nd issue:

> selects direct children only. tr is not a direct child of your table (it never is, missing tbody is auto-inserted by all browsers).

Answer 2

You can add a HTML class to the elements you want to manipulate and simply query on the class:

...
<tr>
  <td>Some text</td>
  <td class="my-custom-class">Some other text</td>
</tr>
...

var percent_restore = document.querySelectorAll(".my-custom-class");
percent_restore.forEach((td)=>{
    console.log(td.innerText)
});

That way you're not lost in your HTML tree.

Answer 3

What you want is something called :nth-child pseudo selector. Learn more from the below link- https://www.w3schools.com/cssref/sel_nth-child.asp

SO your function may be like-

function restore_hp(){

    var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing  tr td:nth-child(2)");
    percent_restore.forEach((td)=>{
        console.log(td.innerText)
    });

}

Codepen: https://codepen.io/ashfaq_haq/pen/WNNOYRR