HTML DOM Доступ к Узлам
Посредством объектной модели документа DOM вы можете обращаться к любому узлу HTML документа.
Доступ к Узлам
Вы можете обращаться к узлу тремя способами:
- Используя метод getElementById()
- Используя метод getElementsByTagName()
- Посредством навигации по дереву узлов, используя взаимоотношения между узлами
Метод getElementById()
Метод getElementById() возвращает элемент с указанным идентификатором ID:
Синтаксис
| узел.getElementById("id"); |
Следующий пример получает элемент с id="intro":
Замечание: Метод getElementById() не работает в XML.
Метод getElementsByTagName()
getElementsByTagName() возвращает все элементы с указанным названием (именем) тега.
Синтаксис
| узел.getElementsByTagName("название_тега"); |
Следующий пример возвращает список узлов всех элементов <p> в документе:
Следующий пример возвращает список узлов всех элементов <p>, которые являются потомками элемента с id="main":
Пример 2
| document.getElementById('main').getElementsByTagName("p"); |
Попробуйте сами »
|
DOM Список Узлов
Метод getElementsByTagName() возвращает список узлов. Список узлов - это массив узлов.
Следующий код выбирает все узлы <p> в списке узлов:
Пример
| x=document.getElementsByTagName("p"); |
К узлам можно обращаться с помощью номера (индекса). Чтобы получить доступ к второму <p>, вы можете написать:
Попробуйте сами »
|
Замечание: Узлы в массиве нумеруются с нуля.
Вы узнаете больше о списках узлов в последующих уроках.
DOM Длина Списка Узлов
Свойство length (длина) определяет количество узлов в списке узлов.
Вы можете циклически перебирать узлы списка, используя свойство length:
Пример
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
} |
Попробуйте сами »
|
Объяснение примера:
- Получить все узлы элементов <p>
- Для каждого элемента <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>
Попробуйте сами
|
