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

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

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

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

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

JS Браузера BOM

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

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 Веб API

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

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML 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 Lesson one</h1>
    <p>Hello world!</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> есть один ребенок: "Hello world!"
  • <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">My First Page</h1>
<p id="id02"></p>

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

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

Пример

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

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

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

Пример

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</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>Hello World!</p>
<div>
<p>Модель DOM очень полезна!</p>
<p> В этом примере демонстрируется свойство <b>document.body</b>.</p>
</div>

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

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

Пример

<html>
<body>

<p>Hello World!</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>
Попробуйте сами »

The most important nodeType properties are:

Node Type Пример
ELEMENT_NODE 1 <h1 class="heading">Schoolsw3</h1>
ATTRIBUTE_NODE 2  class = "heading" (устарело)
TEXT_NODE 3 Schoolsw3
COMMENT_NODE 8 <!-- Это комментарий -->
DOCUMENT_NODE 9 Сам HTML документ (родительский элемент <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

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