Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Навигационные атрибуты объекта Node

↑

⇐ ПредыдущаяСтр 4 из 7Следующая ⇒

Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты (рис. 20), представленные в табл. 11.

Рис. 20. Навигационные атрибуты объекта Node

Таблица 11

Навигационные атрибуты объекта Node

Атрибут	Описание
firstChild	Возвращает первый узел-потомок
lastChild	Возвращает последний узел-потомок
previousSibling	Возвращает предыдущий соседний узел, имеющий с текущим одного родителя
nextSibling	Возвращает следующий соседний узел, имеющий с текущим одного родителя
parentNode	Возвращает родительский узел
ownerDocument	Возвращает корневой узел документа, содержащий текущей узел
nodeName	Возвращает имя узла
nodeValue	Возвращает значение узла в текстовом формате
nodeType	Возвращает тип узла в виде числа

В следующем примере осуществляется проход по древовидной структуре документа:

<html>
<head>
<title>Навигация по документу</title>
</head>
<body>
<h1>Изучение навигации по документу</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>
<script language = "JavaScript">
var temp = document.documentElement;
temp = temp.firstChild;
alert(temp.tagName);
if(temp.nextSibling == 3)
temp = temp.nextSibling.next.Sibling;
else
temp = temp.nextSibling;
alert(temp.tagName);
temp = temp.firstChild;
alert(temp.tagName);
temp.style.color = "red";
if(temp.nextSibling == 3)
temp = temp.nextSibling.nextSibling;
else
temp = temp.nextSibling;
alert(temp.tagName);
temp.style.color = "blue";
temp = temp.parentNode;
alert(temp.tagName);
</script>
</body>
</html>

Динамическая генерация веб-страниц средствами DHTML на основе DOM

Иногда требуется динамически формировать веб-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых веб-страниц, содержимое которых хранится в базе данных. DOM позволяет решить такую задачу.

Для создания объектов у объекта Document имеются следующие методы (табл. 12):

Таблица 12

Методы объекта Document, позволяющие создавать объекты

Метод	Описание
createElement(имя_элемента)	Создает новый узел элемента с указанным именем
createTextNode(текст)	Создает текстовый узел с указанным текстом
createAttribute(имя_атрибута)	Создает новый узел атрибута с указанным именем

Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node (табл. 13):

Таблица 13

Методы объекта Node, добавляющие и удаляющие элементы документа

Метод	Описание
appendChild(новый_узел)	Добавляет объект Node в конец списка узлов-потомков
cloneNode(потомок-опция)	Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно
hasChildNodes()	Возвращает true, если узел имеет потомков
insertBefore(новый_узел, текущий_узел)	Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра
removeChild(узел-потомок)	Удаляет узел-потомок, указанный в качестве параметра
replaceChild(новый_потомок, старый_потомок)	Заменяет старого потомка на нового

Приведем пример динамической генерации документа средствами DOM (рис. 21).

Рис. 21. Динамически сгенерированная веб-страница

<html>
<head>
<title>Пример динамической генерации документа</title>
</head>
<body>
<script language = "JavaScript">
var newText;
var newElem;
newText = document.createTextNode("Пример
динмического создания HTML-документа");
newElem = document.createElement("H1");
newElem.appendChild(newText);
document.body.appendChild(newElem);
newText = document.createTextNode("Абзац");
newElem = document.createElement("P");
newElem.appendChild(newText);
document.body.appendChild(newElem);
</script>
</body>
</html>

Для чтения и установки атрибутов используются следующие методы объекта Element (табл. 14).

Методы объекта Element

Таблица 14

Методы объекта Element

Метод	Описание
getAttribute(имя_атрибута)	Возвращает значение атрибута
setAttribute(имя_атрибута, значение)	Устанавливает значение атрибута
removeAttribute(имя_атрибута)	Устанавливает значение атрибута по умолчанию, затирая текущее значение

Ниже приведен пример на задание атрибутов. И хотя применение атрибутов физического форматирования не рекомендовано к применению (для этих целей используются стили), они были выбраны в качестве примера, так как наглядно демонстрируют идею задания атрибутов методами DOM.

<html>
<head>
<title>Пример динамического создания HTML-документа</title>
</head>
<body>
<script language = "JavaScript">
var newText;
var newElem;
newText = document.createTextNode("Пример динамического
создания HTML-документа");
newElem = document.createElement("H1");
newElem.appendChild(newText);
newElem.setAttribute("align", "center");
document.body.appendChild(newElem);
alert(newElem.getAttribute("align"));
newText = document.createTextNode("Абзац");
newElem = document.createElement("P");
newElem.appendChild(newText);
newElem.setAttribute("align", "right");
document.body.appendChild(newElem);
alert(newElem.getAttribute("align"));
newElem.removeAttribute("align");
</script>
</body>
</html>

⇐ Предыдущая 1 2 345 6 7 Следующая ⇒

Познавательные статьи:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2016-08-10; просмотров: 291; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.227.52.248 (0.008 с.)