САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Где установить? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Let JS Const JS Операторы JS Арифметика JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Поиск строк JS Шаблоны строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Постоянный массив JS Даты JS Формат дат JS Методы получения дат JS Методы набора дат JS Объекты Math JS Случайные числа JS Булевы JS Сравнения JS Оператор If...Else JS Оператор Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Оператор Break JS Повторяющиеся JS Наборы JS Карты JS Typeof JS Преобразование JS Битовые JS Выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Стрелки JS Классы JS JSON JS Отладчик JS Стиль JS Практика JS Ошибки JS Эффективность JS Слова

JS Версии

JS Версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS История

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ объекта Конструкторы объекта Прототипы объекта Повторяющиеся объекты Набор объектов Карты объекта Справочник объектов

JS Функции

Определение функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS Классы

Введение класса Наследование класса Статистический класс

JS Асинхронный

JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM Формы DOM CSS DOM Анимация DOM События DOM Прослушиватель DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузер BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Куки

JS Веб APIы

Веб API Введение Веб API История Веб API Хранилище Веб API Работник Веб API Извлечь Веб API Геолокации

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX Файл XML AJAX Файл PHP AJAX Файл ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS или jQuery

jQuery Селекторы jQuery Элементы jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


JavaScript - HTML DOM Навигация



С помощью HTML DOM вы можете перемещаться по дереву узлов, используя отношения узлов.


Узлы DOM

Согласно стандарту W3C HTML DOM все в документе HTML является узлом:

  • Весь документ представляет собой узел документа
  • Каждый элемент HTML является узлом элемента
  • Текст внутри HTML элементов - это текстовые узлы.
  • Каждый атрибут HTML является узлом атрибута (не рекомендуется)
  • Все комментарии являются узлами комментариев
Древо DOM HTML

В HTML DOM все узлы в дереве узлов могут быть доступны с помощью JavaScript.

Могут быть созданы новые узлы, и все узлы могут быть изменены или удалены.


Узловые отношения

Узлы в дереве узлов имеют иерархические отношения друг с другом.

Термины "родитель", "потомок" и "брат или сестра" используются для описания отношений.

  • В дереве узлов верхний узел называется корнем (или корневым узлом)
  • Каждый узел имеет ровно одного родителя, кроме корня (у которого нет родителя)
  • Узел может иметь несколько дочерних элементов
  • Родственники (братья или сестры) - это узлы с одним и тем же родителем
<html>

<head>
<title>DOM Учебник</title>
</head>

<body>
<h1>DOM Урок первый</h1>
<p>Привет мир!</p>
</body>

</html>
Узловое древо

Из приведенного выше HTML вы можете прочитать:

  • <html> это корневой узел
  • <html> нет родителей
  • <html> является родителем <head> и <body>
  • <head> первый ребенок <html>
  • <body> последний ребенок <html>

и:

  • <head> имеет одного ребенка: <title>
  • <title> имеет один дочерний элемент (текстовый узел): "DOM Учебник"
  • <body> имеет двоих детей: <h1> и <p>
  • <h1> есть один ребенок: "DOM Lesson one"
  • <p> есть один ребенок: "Привет мир!"
  • <h1> и <p> Родственники (братья и сестры)


Перемещение между узлами

Вы можете использовать следующие свойства узла для перехода между узлами с помощью JavaScript:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Дочерние узлы и значения узлов

Распространенная ошибка при обработке DOM - ожидание, что узел элемента будет содержать текст.

Пример:

<title id="demo">DOM Учебник</title>

Узел элемента <title> (в приведенном выше примере) не содержит текст.

Он содержит текстовый узел со значением "DOM Учебник".

К значению текстового узла можно получить доступ через innerHTML свойство узла:

innerHTML property:
var myTitle = document.getElementById("demo").innerHTML;

Доступ к свойству innerHTML аналогичен доступу nodeValue к первому дочернему элементу:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Доступ к первому потомку также можно сделать так:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Все (3) следующие примеры извлекают текст <h1> элемента и копируют его в <p> элемент:

Пример

<html>
<body>

<h1 id="id01">Моя первая страница</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>
Попробуйте сами »

Пример

<html>
<body>

<h1 id="id01">Моя первая страница</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>
Попробуйте сами »

Пример

<html>
<body>

<h1 id="id01">Моя первая страница</h1>
<p id="id02">Привет!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>
Попробуйте сами »

Свойство innerHTML

В этом руководстве мы используем свойство innerHTML для получения содержимого элемента HTML.

Однако изучение других методов, описанных выше, полезно для понимания древовидной структуры и навигации по DOM.


Корневые узлы DOM

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

  • document.body - Тело документа
  • document.documentElement - Полный документ

Пример

<html>
<body>

<p>Привет Мир!</p>
<div>
<p>Модель DOM очень полезна!</p>
<p> В этом примере демонстрируется свойство <b>document.body</b>.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>
Попробуйте сами »

Пример

<html>
<body>

<p>Привет Мир!</p>
<div>
<p>Модель DOM очень полезна!</p>
<p>В этом примере демонстрируется свойство <b>document.documentElement</b>.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>
Попробуйте сами »

Свойство nodeName

Свойство nodeName задает имя узла.

  • nodeName только для чтения
  • nodeName узла элемента совпадает с именем тега
  • nodeName атрибута node - это имя атрибута
  • nodeName текстового узла всегда #text
  • nodeName узла документа всегда #document

Пример

<h1 id="id01">Моя первая страница</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
Попробуйте сами »

Примечание: nodeName всегда содержит имя тега в верхнем регистре элемента HTML.


Свойство nodeValue

Свойство nodeValue задает значение узла.

  • nodeValue для узлов элемента равно null
  • nodeValue для текстовых узлов - это сам текст
  • nodeValue для узлов атрибутов - это значение атрибута

Свойство nodeType

Свойство nodeType только для чтения. Возвращает тип узла.

Пример

<h1 id="id01">Моя первая страница</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
Попробуйте сами »

Наиболее важными свойствами типа узла являются:

Узел Тип Пример
ELEMRUT_НЕТDE 1 <h1 class="heading">Schoolsw3</h1>
ATTRIBUTE_НЕТDE 2 class = "heading" (устарело)
TEXT_НЕТDE 3 Schoolsw3
COMMRUT_НЕТDE 8 <!-- Это комментарий -->
DOCUMRUT_НЕТDE 9 Сам HTML документ (родительский элемент <html>)
DOCUMRUT_TYPE_НЕТDE 10 <!Doctype html>

Тип 2 не рекомендуется в HTML DOM (но работает). Он не является устаревшим в XML DOM.