Page 293 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

>
class="code" >#content</span )
являются уникальными ( о ни должны использоваться н а странице
только ОДИН раз ) . < /р>
<р>Имена классов ( н апример, <span class="cod " > . callout</span> )
e
могут использоваться во многих элементах . < /р>
<div i d = " c allout " class="callout fancy">
2
<р>Одному НТМL-элементу можно присвоить несколько классов . </р>
< / div>
</div>
</body>
</html>
У каждого узла есть свойства nodeType и nodeName (среди других). Свойство
nodeType - это целочисленный идентификатор типа узла. Объект Node содержит
константы, которые соответствуют этим числам. В этой главе мы прежде всего будем
иметь дело с узлами типов Node . ELEMENT _NODE (НТМL-элементы) и Node . ТЕХТ _ NODE
(текстовое содержимое, которое обычно находится в НТМL-элементах). Более под­
робная информация по этой теме приведена в части nodeTy p e документации MDN
I
(https : / / d eveloper . m o z i l l a . org/ru/docs/WeЬ/AP / Node/nodeType).
Ниже приведено хорошее упражнение по написанию функции, которая обходит
(traverse) все дерево DOM и выводит его на консоль, начиная с document.
function printDOM ( n ode , prefix) {
e
e
consol . log (prefix + node . nodeNam ) ;
for ( l et i=O ; i<node . childNodes . length; i++) {
printDOM ( n ode . childNodes [ i ] , prefix + ' \ t ' ) ;

printDOM ( d ocument , ' ' ) ;
Эта рекурсивная функция осуществляет обход дерева в глубину в прямом порядке
(depth-first, pre-order traversal). Таким образом, она следует вниз по всей ветви, преж­
де чем перейти к следующей ветви. Если вы запустите этот пример в браузере с за­
груженной страницей, то увидите на консоли всю структуру страницы.
Хотя это упражнение поучительно, такой способ манипулирования НТМL-кодом
(подразумевающий необходимость обойти все дерево DOM для нахождения искомо­
го узла) был бы утомителен и неэффективен. К счастью, DOM предоставляет более
эффективные методы поиска НТМL-элементов.

Хотя написание собственной функции обхода дерева является хо­
рошим упражнением, API DOM предоставляют объект TreeWa k er,
l
который позволяет перебрать все элементы DOM (с опциональ­
ной фильтрацией по элементам определенных типов). Более по­
дробная информация по этой теме приведена в части document .
createTreeWa k er документации MDN.
l

296 Глава 1 8 . JavaScript в браузере