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

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 Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

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

JS Объекты

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

JS Функции

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

JS HTML DOM

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

JS Браузера BOM

JS Окно 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 или jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод


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 Урок первый"
  • <p> иметь одного ребенка: "Привет, мир!"
  • <h1> и <p> есть братья и сестры


Навигация между узлами

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

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

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

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

Пример:

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

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

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

Значение текстового узла может быть доступно с помощью узла свойства innerHTML:

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">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>Привет, мир!</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 узел атрибута - это имя атрибута
  • 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>
Попробуйте сами »

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

Узел Тип Пример
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.