Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
9.1 Внутреннее представление страницы

Автор: Denisido

Дата: 2010-10-16

Модифицирование веб-страниц

Для генерирования нового и модификации уже имеющегося HTML-кода на странице первым делом вы должны идентифицировать элемент (тег) на странице, а далее выполнить над ним какие-либо действия. При загрузке HTML-документа на страницу выводится его содержимое, при этом браузер запоминает модель HTML, т.е. теги, их атрибуты и последовательность их появления на странице. Во время загрузки страницы Web-обозреватель создает экземпляр объекта HTMLDocument и сохраняет его в переменной document, дополнительно считывает код HTML элементов и создает их внутреннее представление в виде экземпляров соответствующих объектов. Так, для абзаца создается экземпляр объекта HTMLParagraphElement, для гиперсылки - HTMLLinksElement, для картинки - HTMLImageElement, для таблицы - HTMLTableElement и т.д. Также стоит отметить, что текстовое содержимое (узлы) представлено как экземпляр объекта Text. Все объекты, представляющие элементы страницы являются потомками объекта HTMLElement. Такое представление содержимого называется объектной моделью документа (Document Object Model), сокращенно DOM.

<html>
<head>
<title>Представление Объектной модели документа (DOM)</title>
</head>
<body class="main">
<h1 id="header">Заголовок</h1>
<p>Какой-то <b>важный</b> текст</p>
</body>
</html>
HTML
head
title
Представление Объектной модели документов (DOM)
body class="main"
h1 id="header"
Заголовок
p
Какой-то
b
важный
текст

Структура HTML-страницы часто изображается в виде генеалогического древа, где одни теги включают в себя другие и называются родительскими (предками), а вложенные теги - дочерними (потомками). Теги h1 и p называются сестринскими (братскими) и они также являются дочерними элементами по отношению к body.

Война браузеров

Объектная модель документов сама по себе не является частью диалекта JavaScript, это стандарт консорциума W3C, к которому производители большинства браузеров привели свои программы. Объектная модель документов позволяет JavaScript обмениваться информацией с веб-страницей и изменять на ней HTML-код. Но проблема в том, что Web-обозреватели по-разному поддерживают объектную модель документа. К примеру, Internet Explorer (IE) никак не обрабатывает промежутки между тегами, незаполненные текстом, а Opera и Firefox подсчитают их за пустой текст. Web-сценарий тоже представлены по-разному.

Получение доступа к узлам

Для того, чтобы получить доступ к отдельному элементу на странице нужно его как-нибудь обозвать. В примере выше мы присвоили тегу <h1> необязательный атрибут id со значением header и теперь можем получить к нему доступ. Существует три способа: прямой доступ; через коллекции и с помощью свойств и методов объектной модели документа (DOM). Работа с последним - является хорошим тоном программирования.

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

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

header.style.color = '#cc0000'; // устанавливаем бордовый цвет заголовка

Доступ через коллекции

Коллекция - представленна в виде ассоциативного массива. Объект HTMLdocument поддерживает большое количество коллекций:

// Экземпляры объекта HTMLCollection, кроме последнего
all                Все элементы страницы
anchors            Все якоря страницы
applets            Все элементы ActiveX
embeds             Все модули расширения
forms              Все Web-формы
images             Все графические изображения
links              Все гиперссылки
scripts            Все Web-сценарии (только IE & Opera)
styleSheets        Все таблицы стилей

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

document.all['header'];    // получение доступа через коллекции

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

document.images[0]; // доступ к самому первому изображению, если оно есть

Доступ с помощью свойств и методов объектной модели документа (DOM)

Существует два основных метода доступа к узлам:
- getElementById()
- getElementsByTagName()

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

Запустить!
// объектная модель документа (DOM)
  
var ourHeader = document.getElementById('header');
ourHeader.innerHTML = 'Объектная модель документа';

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

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

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

В этом случае для получения доступа к узлу применяется метод getElemenstByName(), который возвращает массив экземпляров объекта HTMLElement с данным именем:

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

Метод getElementsByTagName() возвращает массив элементов - экземпляров объекта HTMLElement, сформированных заданным тегом. Например, все ссылки на странице:

Запустить!
var allLinks = document.getElementsByTagName('a');
var total = 0;
for(var i = 0; i < allLinks.length; i++) {
                                         total++;       
                                        };
alert('Всего ссылок на странице: '+total);

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

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

Свойство childNodes

Содержит все дочерние элементы по отношению к текущему и при этом вложенны непосредственно в него. Похож на массив, возвращенный методом getElementsByTagName:

Запустить!
// Объектная модель документа
  
var head = document.getElementById('header'); // получаем доступ к тегу h1
var kinder = head.childNodes;         // находим дочерний узел (сам вложенный текст)
var textKinder = kinder[0].nodeValue; // вытаскиваем текст с помощью свойства nodeValue
alert(textKinder);                    // выводим результат в модальное окно

В нашем примере первым делом получаем доступ к заголовку h1 с уникальным идентификатором header. Первый и единственный дочерний элемент - сам текст. Определяем его с помощью свойства .childNodes. Стоит отметить, что мы получили только доступ к тексту, чтобы его вывести мы используем свойство .nodeValue.
На заметку: если вы смотрели примеры в действии выше (кнопки "Запустить!"), то в модальном окне появится сообщение "Объектная модель документа", т.к. вы производили замену, используя свойство innerHTML, в противном случае - останется "Заголовок"

// Объектная модель документа (второй вариант сослаться на заголовок)
  
var kinder = document.body.childNodes[0];  // ссылка на тег h1

Свойство firstChild

Возвращает первый дочерний элемент по отношению к текущему. Если дочерних элементов нет, возвращается значение null:

Запустить!
// Объектная модель документа
  
var head = document.getElementById('header');
var firstKind = head.firstChild;
var val = firstKind.nodeValue;
alert(val);

Свойство lastChild

Возвращает последний дочерний элемент по отношению к текущему, т.е. антипод свойства firstChild. Если текущий элемент не содержит дочерних элементов, возвращается значение null:

// Объектная модель документа
  
var lastKind = document.body.lastChild; // ссылка на последний элемент тела страницы

Свойство parentNode

Возвращает родительский элемент по отношению к текущему:

// Объектная модель документа
  
var head = document.getElementById('header');
var predok = head.parentNode;  // в нашем примере ссылаемся на тег body 

Свойство nextSibling

Указывает на узел, следующий за текущим. Если элемент последний, то возвращает значение null:

Запустить!
// Объектная модель документа
  
var head = document.getElementById('header');
var nextel = head.nextSibling;  // в нашем примере ссылаемся на след. тег p
if(nextel) {
      var val = nextel.lastChild.nodeValue;  // вытаскиваем последний дочерний элемент
      alert(val); // выводим результат в модальное окно
     };

Свойство previousSibling

Указывает на узел, предыдущий по отношению к текущему. Если элемент первый, то возвращает значение null:

// Объектная модель документа
  
var x = document.body.lastChild;
var prev = x.previousSibling;

Метод hasChildNodes

Не принимает параметров и возвращает значение true, если находит дочерние элементы, в противном случае возвращает значение false:

Запустить!
// Объектная модель документа
  
var head = document.getElementById('header');
var nextel = head.nextSibling;  // в нашем примере ссылаемся на след. тег p
var result = nextel.hasChildNodes();
alert(result);



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2010-10-21

Уроки идут от простого к сложному, отличный материал.

Коментарий добавил(а): fibro
Дата: 2012-02-08

Очень нравятся уроки. Но голова моя садовая не совсем всё понимает. На этом уроке я застрял. Создаю страничку у себя на компе. Использовал прямой доступ к узлу, но цвет заголовка не изменился. Почему?

Коментарий добавил(а): fibro
Дата: 2012-02-08

Ничего не понимаю! Из этого урока у меня ничего не получается: цвет заголовка не меняется, заголовок не заменяется, количество ссылок не подсчитывает. Сколько угодное количество ссылок устанавливаю на страницу, всегда в модальном окне выходит количество - 0

Коментарий добавил(а): Denisido
Дата: 2012-02-15

Здравствуйте, Вы можете выложить то, что вы делаете, например, "залить" свою странику на бесплатный хост?

Коментарий добавил(а): fibro
Дата: 2012-02-23

Спасибо Denisido. Я проснулся, умылся, и с утра на свежую голову всё получилось :). Только у меня вопрос: можете ли продемонстрировать пример доступа через коллекции?

Коментарий добавил(а): Denisido
Дата: 2012-02-23

http://test.kobru.ru/fibro.html

Коментарий добавил(а): fibro
Дата: 2012-02-23

Спасибо большое! Думаю, надо в этом уроке отметить, что DOM надо использовать внутри тела страницы, и желательно в конце, после всех узлов. А то я именно из-за этого и мучился сначала, писал скрипты в теге head, как и в предыдущих уроках.

Коментарий добавил(а): Denisido
Дата: 2012-02-23

Важное замечание! После будет описание как загрузить скрипт после загрузки страницы. Пример: window.onload = scriptAfterLoad; // выполнит ф-цию scriptAfterLoad после загрузки стр.

Коментарий добавил(а): fibro
Дата: 2012-02-23

Еще вопрос: не понимаю почему выражение (! nextel) означает "если элемент последний то..." ? Ведь знак (!) означает только "НЕ".

Коментарий добавил(а): Denisido
Дата: 2012-02-25

Скорее всего я что-нибудь тестировал и забыл удалить это условие. В ближайшее время эту запись скорректирую. В любом случае, при тестировании мне не нравится то, что возвращает значение null, поэтому дополнительную информацию Вы сможете найти по ссылке: http://test.kobru.ru/fibro2.html Смотрите исходный код!

Коментарий добавил(а): fibro
Дата: 2012-02-25

Спасибо! Неужели нельзя посчитать ссылки попроще, без циклов: http://and.mail15.com/test3.html ? Или вы циклами что-то хотели сказать?

Коментарий добавил(а): fibro
Дата: 2012-02-25

Ой простите, предыдущий пост - это еще один вопрос по уроку.

Коментарий добавил(а): Denisido
Дата: 2012-02-25

Задачи можно решать множеством способов. Главное построить корректный алгоритм. Нужно понимать конечный результат. Если Вам нужно вытащить каждую ссылку и применть к ним регулярное выражение - это одно, если просто подсчитать количество ссылок - это другое.

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 14066

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.