На главную страницу сайта celitel.info
Вы не вошли в систему! [ ВОЙТИ ] или [ ЗАРЕГИСТРИРОВАТЬСЯ ]
CELITEL » Записки сайтостроителя » Тема: Динамическое изменение HTML (DOM) -- Стр. 1  | Перейти в: 

Послал Сообщение
healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 22-07-2015 07:03
            

В далекие, темные времена, еще до появления IE4, когда IE отвоевывал позиции у NN,
когда (даже страшно сказать!) IE было принято хвалить, а не ругать, так вот в эти времена в мире не было DOM.
Сейчас это даже трудно представить, но аксакалы сайтостроения, серьезно не подружившиеся со склерозом,
могут рассказать вам массу забавных историй из тех времен.
(Я раньше тоже рассказывал, а теперь...этот...как его...когда забываешь...нет, не долги... потом вспомню... а о чем это я?)
Так вот, уже в те времена древние сайтостроители умудрялись делать контент динамическим.
Что уж говорить о наших днях, когда возможностей таких стало несравненно больше.
Некоторые из них, с примерами и объяснениями мы и рассмотрим в этом топике.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 13-08-2015 08:45
            

С чего же начать эту тему?
Да пожалуй, со средств, которые существовали до эры DOM. Собственно, их никто не отменял, они работают.
Итак, document.write из javasсript поволяет вписать непосредственно в текст HTML документа данные.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 13-08-2015 08:46
            

<script type="text/JavaScript" language="JavaScript">
<!--
rn=Math.floor(Math.random()*1000);
d=document;
d.write("<img src="/lstat/counta11.php?pag="+escape(window.location.href)+"&ref=");
if (d.referrer) { d.write(escape(d.referrer)); }
d.write("&rn="+rn+"" width='88' height='31' border='0'>");
//-->
</script>

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 13-08-2015 08:57
            

Рассмотрим приведенный выше пример.
Это пример вывода собственного счетчика. Когда-то нечто похожее стояло у меня на страницах этого форума.
Почему необходимо использовать Javasсript, надеюсь, понятно - тут передается в счетчик имя страницы, возможно, имя вызвашей страницы (если определена) и случайное число в виде параметра для избежания кеширования счетчика.
(Если уж рассматривать именно эту задачу, без рассмотрения темы, то всего этого можно добиться и средствами SSI.
При соотвествующем расположении Светил, возможно я опишу эту тему подробнее.)

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 14-08-2015 10:46
            

Что же сделает этот пример? Очевидно, что при исполнении Javasсript впишет в документ новые данные.
Осталось определить, в какое место документа они попадут.
Если указанный код находится внутри HTML документа секции body, то данные будут внесены именно в то место, где и расположен javasсript. А если они расположены в секции head? Или в файле с асинхронной загрузкой? Да, там может находиться процедура, которая затем вызывается из скрипта в теле HTML body.
Остальные случаи лучше даже не рассматривать).

Рассмотрим положительные и ... другие моменты использования такого подхода.
С одной стороны - здесь все просто, не нужно изучать DOM модель с ее методами и свойствами, работает одиноково во всех браузерах. Теперь с другой стороны.
О расположении таких скриптов уже было упомянуто.
Если (что бывает достаточно часто) изменения необходимо внести в несколько мест документа, то необходимо в этих местах располагать отдельные javasсript секции.
Все же удобнее скомпоновать их в одно место, откуда и будут вноситься изменения в различные места HTML документа.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 14-08-2016 13:53
            

Ну и наконец DOM.
Что это за зверь и зачем он нужен.
Итак, DOM (Document Object Model) - Объектная модель документа.
В википедии дается такое определение DOM
DOM это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Проще говоря, у нас появляется возможность используя не очень сложный инструментарий
получить доступ ко всем элементам HTML страницы. Этот же интерфейс можно использовать и для работы с XML документами, но это не тема для этого раздела.
Что же позволяет сделать этот интерфейс?
Весь HTML или XML-документ представляется в виде дерева объектов. К которому у вас есть доступ.
Соответственно можно читать, изменять, вставлять новые, удалять, перемещать объекты, менять их структуру и свойства.
Вообще говоря, отображаемый документ может не иметь ничего общего с самим HTML документом.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 14-08-2016 14:05
            

Для общего представления этого достаточно.
Писать очередной учебник по DOM я не буду. Вы без труда найдете множество таких в сети.
Здесь же будут представлены некоторые приемы и примеры динамического изменения HTML.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 15-08-2016 13:22
            

Итак, есть у нас есть дерево объектов.
Как в этой упорядоченной куче найти то, что нам необходимо.
Есть для этого различные поиски.
Самый простой и он же самый часто используемый случай.
Поиск по id.
Если в тэге HTML есть атрибут id, то для его поиска можно воспользоваться
getElementById(name_id)

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое изменение HTML (DOM)
Послано: 15-08-2016 13:36
            

Еще один поиск по дереву объектов - Поиск по тегу.
getElementsByTagName(tag)
Разумеется, результат в данном случае будет массив объектов.
Если в качестве имени указать звездочку, то можно получить список всех дочерних узлов.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.



Статистика

Сейчас у нас: и 12 Гостя(ей)
Всего сообщений: 26669
Всего тем: 1151

Based on:

 

  my counter Valid XHTML 1.0 Strict Valid CSS!