УРОКИ JAVASCRIPT HTML DOM DHTML AJAX ПРИМЕРЫ JAVASCRIPT РЕКЛАМА

HTML DOM Доступ к Узлам


« Назад Далее »

Посредством объектной модели документа DOM вы можете обращаться к любому узлу HTML документа.


Доступ к Узлам

Вы можете обращаться к узлу тремя способами:

  1. Используя метод getElementById()
  2. Используя метод getElementsByTagName()
  3. Посредством навигации по дереву узлов, используя взаимоотношения между узлами

Метод getElementById()

Метод getElementById() возвращает элемент с указанным идентификатором ID:

Синтаксис

узел.getElementById("id");

Следующий пример получает элемент с id="intro":

Пример

document.getElementById("intro");

Попробуйте сами »

Замечание: Метод getElementById() не работает в XML.


Метод getElementsByTagName()

getElementsByTagName() возвращает все элементы с указанным названием (именем) тега.

Синтаксис

узел.getElementsByTagName("название_тега");

Следующий пример возвращает список узлов всех элементов <p> в документе:

Пример 1

document.getElementsByTagName("p");

Попробуйте сами »

Следующий пример возвращает список узлов всех элементов <p>, которые являются потомками элемента с id="main":

Пример 2

document.getElementById('main').getElementsByTagName("p");

Попробуйте сами »

DOM Список Узлов

Метод getElementsByTagName() возвращает список узлов. Список узлов - это массив узлов.

Следующий код выбирает все узлы <p> в списке узлов:

Пример

x=document.getElementsByTagName("p");

К узлам можно обращаться с помощью номера (индекса). Чтобы получить доступ к второму <p>, вы можете написать:

y=x[1];

Попробуйте сами »

Замечание: Узлы в массиве нумеруются с нуля.

Вы узнаете больше о списках узлов в последующих уроках.


DOM Длина Списка Узлов

Свойство length (длина) определяет количество узлов в списке узлов.

Вы можете циклически перебирать узлы списка, используя свойство length:

Пример

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

Попробуйте сами »

Объяснение примера:

  1. Получить все узлы элементов <p>
  2. Для каждого элемента <p> вывести значение его текстового узла

Навигация с помощью Взаимоотношений Узлов

Три свойства: parentNode, firstChild и lastChild позволяют путешествовать по структуре документа.

Посмотрите на следующий HTML фрагмент:

<html>
<body>

<p>Привет Мир!</p>
<div>
  <p>DOM очень полезная модель!</p>
  <p>Этот пример демонстрирует взаимоотношения между узлами.</p>
</div>

</body>
</html>

В HTML коде выше первый элемент p является первым дочерним узлом (firstChild) элемента body, а элемент div - последним дочерним узлом (lastChild) элемента body. Родительским узлом (parentNode) первого элемента p и элемента div является элемент body, а родительским узлом элементов p внутри элемента div является элемент div.

Свойство firstChild может также использоваться для доступа к тексту элемента:

Пример

<html>
<body>

<p id="intro">Привет Мир!</p>

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

Попробуйте сами »


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

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

  • document.documentElement - возвращает корневой узел документа
  • document.body - дает прямой доступ к тегу <body>

Попробуйте сами






« Назад Далее »
© 2011-2016 Уроки JavaScript