Прямой доступ

•Используя такой способ, мы обращаемся к элементу прямо по имени, затем пишем свойство или метод:

header.style.color = '#cc0000';

// устанавливаем бордовый цвет заголовка

152

•Доступ к нашему элементу мы можем получить по строковому индексу, который совпадает с именем элемента страницы:

document.all['header'];

// получение доступа через коллекции

•Также доступ можно получить подставив числовой индекс элемента страницы. Например, код доступа к первой картинке на странице следующий:

document.images[0];

// доступ к самому первому изображению, если оно есть

154

Доступ с помощью свойств и методов

объектной модели документа (DOM)

Существует два основных метода доступа к узлам:

getElementById()

getElementsByTagName()

155

Метод getElementById()

Находит нужный элемент с определенным идентификатором. В нашем случае заголовок h1 имеет уникальный id со значением header:

// объектная модель документа (DOM)

var ourHeader = document.getElementById('header'); ourHeader.innerHTML = 'Объектная модель документа';

Команда getElementById() - это метод объекта document, а 'header' - простой литерал переданный как параметр, обозначающий уникальность имени идентификатора. Причем в качестве параметра может быть и переменная.

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

156

Атрибут name

Аналогичный подход можно применить и с помощью атрибута name:

<p name="newAtr">Новый параграф</p>

В этом случае для получения доступа к узлу применяется метод getElemenstByName(),

который возвращает массив экземпляров объекта HTMLElement с данным именем:

var newPar = document.getElementsByName('newAtr'); var result = newPar[0];

157

Свойства и методы объекта HTMLElement

Объектная модель документа предлагает несколько способов доступа к соседним узлам.

Рассмотрим их.

158

Свойство childNodes

Содержит все дочерние элементы по отношению к текущему и при этом вложены непосредственно в него.

Похож на массив, возвращенный методом getElementsByTagName: // Объектная модель документа

var head = document.getElementById('header');

//получаем доступ к тегу h1 var kinder = head.childNodes;

//находим дочерний узел (сам вложенный текст) var textKinder = kinder[0].nodeValue;

//вытаскиваем текст с помощью свойства nodeValue alert(textKinder);

//выводим результат в модальное окно

159

В нашем примере первым делом получаем доступ к заголовку h1 с уникальным идентификатором header. Первый и единственный дочерний элемент - сам текст.

Определяем его с помощью свойства

.childNodes.

Стоит отметить, что мы получили только доступ к тексту, чтобы его вывести мы используем свойство

.nodeValue.

160

Свойство firstChild

•Возвращает первый дочерний элемент по отношению к текущему.

•Если дочерних элементов нет, возвращается

значение null:

// Объектная модель документа

var head = document.getElementById('header'); var firstKind = head.firstChild;

var val = firstKind.nodeValue;

alert(val);

161