Есть следующий код:
<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?
document.querySelector('.listview tr:nth-child(2) td:nth-child(2)').className
children
учитывает теги, аchildNodes
также учитывает ещё комментарии и текст. В данном примере получается: один тег<tbody>
(автоматически подставляется некоторыми браузерами) и один текст (перевод строки и несколько пробелов между<table>
и<tr>
)td
мне, признаться, было лень, но если скреститьtables[0]
с комментарием DiD, то должно получиться что-то типаtables[0].querySelector("tr:nth-child(2) td:nth-child(2)")
. Сchildren
(и тем более сchildNodes
) муторно получится - надо будет вручную отфильтровывать элементы (например, поtagName
)