В этой статье мы продолжим говорить об объектной модели документов (DOM) и рассмотрим основные способы доступа к ней с помощью JavaScript.
Давайте для примера возьмем небольшой HTML документ, в котором есть абзац и неупорядоченный список:
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <title>JavaScript – доступ к узлам DOM</title> </head> <body> <p id="paragraph">Первый тестовый параграф</p> <ul> <li>Пункт 1 неупорядоченного списка</li> <li>Пункт 2 неупорядоченного списка</li> <li>Пункт 3 неупорядоченного списка</li> <li>Пункт 4 неупорядоченного списка</li> <li>Пункт 5 неупорядоченного списка</li> </ul> </body> </html>
В этом примере мы собираемся получить доступ к нашему абзацу с помощью метода DOM ‘getElementById
‘:
var firstParagraph = document.getElementById('paragraph'); // теперь у нас есть ссылка на узел DOM. Этот узел – первый параграф
Переменная firstParagraph
теперь является ссылкой на узел DOM. С этим узлом мы можем сделать несколько вещей – мы можем получить его содержимое и атрибуты, а также можем манипулировать любым его аспектом. Мы можем удалить его, клонировать или переместить в другие части дерева DOM.
Ко всем элементам, которые есть в документе, мы можем получить доступ с помощью JavaScript и DOM API. Например, подобным способом мы можем получить доступ и к неупорядоченному списку, единственная проблема состоит в том, что у этого списка нет идентификатора (ID). Мы можем присвоить ему идентификатор, а затем использовать тот же метод, что и выше, или мы можем получить к нему доступ, используя метод ‘getElementsByTagName
‘ (доступ к элементам по их тегам):
var vseNeuporyadochenniyeSpiski = document.getElementsByTagName('ul'); // 'getElementsByTagName' возвращает коллекцию/список всех доступных узлов
Метод ‘getElementsByTagName
‘ возвращает коллекцию/список активных узлов. Эта коллекция похожа на массив в том, что у нее есть свойство размера (length
). Важно отметить, что эти коллекции являются «живыми» — если вы добавите новый элемент в DOM, то коллекция обновится сама. Поскольку это массивоподобный объект, мы можем получить доступ к каждому узлу через индекс, от 0 до общей длины коллекции (минус 1):
// получаем доступ к одному (первому) неупорядоченному списку: индекс [0] var neuporyadochenniySpisok = document.getElementsByTagName('ul')[0]; // cоздаем список узлов всех элементов списка в теге UL: var vseElementiSpiska = neuporyadochenniySpisok.getElementsByTagName('li'); // теперь мы можем перебрать каждый элемент списка, используя цикл FOR: for (var i = 0, length = vseElementiSpiska.length; i < length; i++) { // извлекаем текстовый узел и выводим его содержимое: alert( vseElementiSpiska[i].firstChild.data ); }
Термин «обход» используется для описания действия перемещения по DOM и поиске узлов. DOM API предоставляет нам множество свойств узлов, которые мы можем использовать для перемещения вверх и вниз по всем узлам в документе.
Следующие свойства есть у всех узлов и позволяют получать доступ к связанным/близким узлам:
Node.childNodes
: вы можете использовать это свойство для доступа ко всем прямым дочерним узлам одного элемента. Это будет объект, похожий на массив, который можно будет «перебрать».Node.firstChild
: это то же самое, что и доступ к первому элементу в массиве ‘childNodes
‘ (‘Element.childNodes[0]
‘).Node.lastChild
: это то же самое, что и доступ к последнему элементу в массиве ‘childNodes
‘ (‘Element.childNodes[Element.childNodes.length-1]
‘).Node.parentNode
: это свойство дает вам доступ к родительскому узлу текущего узла. В этом случае у вас будет доступ только к одному родительскому узлу. Чтобы получить доступ к следующим предкам родительского узла, используйте «node.parentNode.parentNode
» и т.д.Node.nextSibling
: это свойство дает вам доступ к следующему узлу на том же уровне в дереве DOM.Node.previousSibling
: это свойство дает вам доступ к последнему узлу того же уровня в дереве DOM.
Итак, как вы можете видеть, обход DOM невероятно прост, здесь главное знать имена свойств.
Также для примера выше (HTML документ) следует отметить одну вещь: даже пустой элемент будет извлечен как узел. Например, если у вас между тегом <ul>
и первым <li>
есть пустое пространство, оно фактически будет считаться узлом. Точно так же неупорядоченный список на самом деле может не являться следующим узлом абзаца (nextSibling
), если между ними есть пустое пространство. В этом случае он будет другим узлом. Как правило, в таких ситуациях вы должны обойти массив childNodes
и протестировать nodeType
. nodeType
, равный 1, означает, что это элемент; равный 2 означает, что это атрибут; равный 3 означает, что это текстовый узел и так далее.
На сегодня все. Мы надеемся, что вы научились чему-то полезному из сегодняшнего урока. В следующих уроках мы продолжим детальное изучение основных аспектов JavaScript.
Сегодняшний обзор посвящен людям, для которых важен вопрос конфиденциальности в Интернете и кто ценит свои…
Впервые о бренде Pro Plan услышали в 1986 году, когда он стал частью американской компании…
Страх наказания хуже самого наказания (В наказании есть нечто определенное, оно все же лучше, чем…
Если вы планируете разместить веб-сайт в Интернете, очень важно найти для него быстрый и надежный…
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…