Объект Node. Как перемещаться по DOM

Объект Node. Как перемещаться по DOM

Здравствуйте! Мы с вами уже рассмотрели  что такое объект document и в этом уроке мы разберем собственно узел объекта document или Node.  Дело в том, что каждый узел, будь то html-элемент, его атрибут или  даже текст, в структуре DOM является объектом Node.  Этот служебный объект имеет ряд свойств, с помощью которых  вы можете перемещаться по дереву элементов DOM:

навигация по dom


Давайте рассмотрим основные свойства объекта Node:

  • childNodes: возвращает коллекцию дочерних узлов  элемента
  • firstChild: позволяет получить первый дочерний узел элемента
  • lastChild: позволяет получить последний дочерний узел текущего узла
  • previousSibling: находит предыдущий элемент, который находится на одном уровне модели DOM (так называемый сестринский элемент)
  • nextSibling:  находит следующий элемент, который находится на одном уровне с текущим
  • ownerDocument: вернет корневой узел  элемента
  • parentNode: возвращает родительский узел найденного элемента
  • nodeName: позволяет получить имя узла
  • nodeType: вернет тип узла в виде числа
  • nodeValue: вернет или установит значение узла в виде простого текста

Давайте рассмотрим пример  перебора всех дочерних узлов элемента:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="artic">
        <h3>Заголовок материала</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
<script>
var article = document.querySelector("div.artic");
var nodes = article.childNodes;
for(var i=0; i<nodes.length;i++){

    var type = "";
    if(nodes[i].nodeType===1)
        type="элемент";
    else if(nodes[i].nodeType===2)
        type="атрибут";
    else if(nodes[i].nodeType===3)
        type="текст";

    console.log(nodes[i].nodeName + ": " + type);
}
</script>
</body>
</html>

Здесь в примере с помощью метода document.querySelector(«div.artic») выбран элемент div с классом artic и далее мы просто пробегаемся по его дочерним узлам. Делаем это в цикле выводим имя узла и о тип с помощью соответствующих свойств nodeName и nodeType. Каждому типу должно соответствовать определенное число:

nodeType Тип узла
1 элемент
2 атрибут
3 текст

Но как видно из кода, хотя  в блоке div на странице только 3 узла: h3 и два параграфа, но консоль отобразит нам  аж пять узлов.

Читайте также  Как поменять стиль элемента через JavaScript

 

А все из-за того, что пробелы между узлами также  будут считаться за отдельные текстовые узлы.  А вот если бы пробелов не было:

<div class="article"><h3>Заголовок статьи</h3><p>Первый абзац</p><p>Второй абзац</p></div>

То при переборе по данному узлу обнаружилось только 3 дочерних узла, как собственно и ожидалось.

Навигация по узлам дерева DOM

Вы можете использовать свойства nextSibling и previousSibling пройтись по узлам в прямом или обратном порядке. Давайте рассмотрим пример

var article = document.querySelector("div.artic");
// получаем первый дочерний элемент
var node = article.firstChild;
console.log(node.nodeName);
// обращаемся к следующему узлу, пока он определен
while((node=node.nextSibling)!==null){
    console.log(node.nodeName);
}

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

var article = document.querySelector("div.artic");
// получаем первый дочерний элемент
var node = article.lastChild;
console.log(node.nodeName);
// обращаемся к предыдующему узлу, пока он определен
while((node=node.previousSibling)!==null){
    console.log(node.nodeName);

Итоги

В DOM доступна навигация по узлам элемента. Для нахождения соседних  узлов используются методы previousSibling() и nextSibling().

Для получения коллекуии всех дочерних  элементов узла  используется метод childNodes().

Задания

Для страницы:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
</head> 
<body> 
<div>Пользователи:</div> 
<ul> 
<li>Мария</li> 
<li>Вован</li> 
</ul> 
<!-- комментарий --> 
<script> // ... ваш код </script> 
</body> 
</html>

Напишите код, который найдет элемент head
Напишите код, который получит список пользователей

Как проверить содержит ли элемент другие элементы

Напишите код. который проверял бы содержит ли элемент другие элементы иными словами вам надо проверить есть ил у элемента дочерние вложенные элементы

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: