Как перемещаться по узлам, используя .firstChild

Question

Как перемещаться по узлам, используя .firstChild

0

Допустим, у нас есть что-то вроде этого:

<table class="abc">
    <tr>
        <td>123</td>
    </tr>
    <tr>
    </tr>
</table>

Я не буду показывать это значение: почему это неверно:

alert(document.getElementsByClassName("abc")[0].firstChild.firstChild.firstChild.nodeValue);

и это:

alert(document.getElementsByClassName("abc")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[0].firstChild.nodeValue);

?

user3379351 04 март 2014, в 15:41

Источник

0

я бы предложил вам использовать document.querySelectorAll вместо
Mukesh Soni 04 март 2014, в 14:22
0

Спасибо за быстрый ответ. Это работает: alert(document.querySelectorAll("table.abc>tbody>tr>td:nth-of-type(1)")[0].innerHTML);
user3379351 04 март 2014, в 15:11

Теги:

javascript

html

1 ответ

Ещё вопросы

я бы предложил вам использовать document.querySelectorAll вместо
Спасибо за быстрый ответ. Это работает: alert(document.querySelectorAll("table.abc>tbody>tr>td:nth-of-type(1)")[0].innerHTML);

fcalderan · Accepted Answer · 2014-03-04T13-07-00.000Z

Причина вашего неработающего оповещения связана с разрывами строк и пробелами между тегами: если вы пытаетесь оповестить

document.getElementsByClassName("abc")[0].firstChild

с кодом, который вы предоставили, вы получите textNode, а не DOMelement, как вы ожидаете. Если вы удалите эти пробелы

<table class="abc"><tr><td>123</td></tr></table>

ваше предупреждение может работать, но вам нужно еще раз получить доступ к .firstChild, потому что браузер .firstChild элемент таблицы таблицы (tbody) в дерево DOM.

document.getElementsByClassName("abc")[0]
   .firstChild    /* tableSection DOM element */
   .firstChild    /* tableRow DOM element */
   .firstChild    /* tableCell DOM element */
   .firstChild    /* textNode */
   .nodeValue     /* 123 */

См. Этот пример codepen: http://codepen.io/anon/pen/IAeJl

во втором примере проблема не существует, просто потому, что вы обращаетесь к ячейке таблицы и ячейке таблицы, независимо от того, являются ли они узлами firstChild узлов своих предков или нет

в любом случае, в современных браузерах вы можете получить доступ к этому элементу просто с помощью document.querySelector('.abc td');