В этой статье мы продолжим говорить об объектной модели документов (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.
Учеба за границей уже давно ассоциируется с качественным образованием, новыми возможностями и множеством перспектив. Но…
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
Выбор идеального хостинга под свой сайт может быть довольно запутанным делом, особенно когда существует так…
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…