Получить доченрий элемент JavaScript

Question

Есть следующий код:

<table cellpadding='0' cellspacing='0' width='100%' border='0' class='listview'>
  <tr class="b">
    <td class="c">Один</td>
    <td class="c">Два</td>
    <td class="c">Три</td>
  </tr>
  <tr class="b">
    <td class="c">Один</td>
    <td class="c">Два</td>
    <td class="c">Три</td>
  </tr>
  <tr class="b">
    <td class="c">Один</td>
    <td class="c">Два</td>
    <td class="c">Три</td>
  </tr>
</table>
<script>
  var tables = document.getElementsByTagName('table');
   alert(tables[0].childNodes.length);//Возвращает 2
   alert(tables[0].children.length);//Возвращает 1
</script>

Почему alert в первом случаи возвращает 1 а в втором 2? Как мне добраться до класса 2-ого td у 2-ого tr?(понимаю что класс можно получить .getAttribute('class') интересует как по цепочке от элемента table добраться до нужного td элемента используя children и chaildNodes). В чём разница childread и chaildNodes?

Answer 1

Посоветовал бы использовать:

let rows = document.querySelectorAll("table tr")
rows.forEach((elR,indR)=>{
  //ТУТ твой код
})

Answer 2

Как мне добраться до класса 2-ого td у 2-ого tr?

tables[0].rows[1].cells[1]

<table cellpadding='0' cellspacing='0' width='100%' border='0' class='listview'>
  <tr class="b">
    <td class="c">Один 1</td>
    <td class="c">Два 1</td>
    <td class="c">Три 1</td>
  </tr>
  <tr class="b">
    <td class="c">Один 2</td>
    <td class="c">Два 2</td>
    <td class="c">Три 2</td>
  </tr>
  <tr class="b">
    <td class="c">Один 3</td>
    <td class="c">Два 3</td>
    <td class="c">Три 3</td>
  </tr>
</table>
<script>
  var tables = document.getElementsByTagName('table');
  console.log(tables[0].rows[1].cells[1].getAttribute("class"), tables[0].rows[1].cells[1].textContent);
</script>

БЛОГ НА HUSL

Получить доченрий элемент JavaScript

Ответы (2 шт):