AJAX загрузка
home

Обращаться к содержимому элементов в HTML DOM можно двумя разными способами.

Обращение к элементам

Условно можно сказать что обращаться к элементам в DOM можно двумя различными способами:

  1. Использовать последовательное перемещение по объектной структуре до нахождения необходимого элемента.
  2. Использовать прямое обращение к элементу по его идентификатору или имени тэга.

Второй способ безусловно проще и удобнее и в повседневной практике всегда используют именно его. Однако в учебных целях полезно разобрать оба способа.

Последовательное перемещение

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

Красной стрелкой и черными кружками с цифрами отмечено как последовательно будет выглядеть перемещение по объектной структуре:

Перемещение по объектной структуре

Разберем процесс перемещения подробнее:

  1. Обращаемся к объекту document, в котором находится DOM. Код на данном шаге имеет вид: document.
  2. Обращаемся к корневому узлу (т.е. тэгу <html>) который находится внутри объекта document. Код на данном шаге имеет вид: document.documentElement.
  3. Обращаемся ко второму потомку (так как в коде страницы body располагается после head) корневого узла. Код на данном этапе будет иметь вид: document.documentElement.childNodes[1]. Вы также можете напрямую обратится к body используя следующий код (далее будем полагать что Вы выбрали этот вариант): document.body.
  4. Обращаемся ко второму потомку body (элемент p задан в коде после h1). Код на данном этапе будет иметь вид: document.body.childNodes[1].
  5. Обращаемся к текстовому узлу который является первым потомком p и узнаем значение его свойства. Код на данном этапе будет иметь вид: document.body.childNodes[1].childNodes[0].nodeValue.

Пример 

//Выведем содержимое абзаца на страницу
document.write(document.body.childNodes[1].childNodes[0].nodeValue);
Попробовать в редакторе

Прямое обращение к элементу

С помощью метода getElementById Вы можете напрямую обращаться к элементам по их идентификатору (атрибут id), а с помощью свойства innerHTML можно быстро считывать их текстовое содержимое.

Пример 

//Выведем содержимое второго абзаца на страницу
document.write(document.getElementById("par").innerHTML);
Попробовать в редакторе

Сделайте сами

Задание 1 используя вначале последовательное, а затем прямое обращение выведите содержимое элемента с id='zadanie1' на страницу.

Пример 

<div id="wrap1">
<p>Я обычный абзац.</p>
<p>Я еще один обычный абзац.</p>
<div id="wrap11">
<p id="zadanie1">Выведите это содержимое на страницу</p>
</div>
</div>
Попробовать в редакторе