Тег предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Чтобы браузер знал, согласно какому стандарту отображать текущий HTML-документ необходимо в первой строке кода задавать .
Синтаксис
верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "">Пример: Обьявление
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict ), которые работают на основе только определенных тегов, есть переходные (transitional ), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset ).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML . Есть 3 разных типа doctype в версии HTML 4.01.
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
HTML 4.01 Strict (HTML 4.01 Строгий)
Этот тип DTD включает все элементы и атрибуты html, за исключением визуальных (оформительских) или не рекомендованных элементов (например, font). Использование фреймов запрещено.
HTML 4.01 Transitional (HTML 4.01 Переходный)
Этот тип DTD включает все элементы и атрибуты html, включая визуальные (оформительские) и не рекомендованные элементы (например, font). Использование фреймов запрещено.
HTML 4.01 Frameset (HTML 4.01 Фрейм)
То же самое, что и HTML 4.01 Transitional, но разрешает использование фреймов.
XHTML 1.0 Strict (XHTML 1.0 Строгий)
Этот тип DTD включает все элементы и атрибуты html, за исключением визуальных (оформительских) или не рекомендованных элементов (например, font). Использование фреймов запрещено. Разметка должна быть написана, как хорошо оформленный XML.
XHTML 1.0 Transitional (XHTML 1.0 Переходный)
Этот тип DTD включает все элементы и атрибуты html, включая визуальные (оформительские) и не рекомендованные элементы (например, font). Использование фреймов запрещено. Разметка должна быть написана, как хорошо оформленный XML.
XHTML 1.0 Frameset (XHTML 1.0 Фрейм)
Аналогично XHTML 1.0 Transitional, но разрешает использование фреймов.
Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность.
В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала.
Подсчет дочерних узлов
Для демонстрации я буду использовать следующую разметку HTML, в течение статьи мы ее несколько раз изменим:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6
Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию элементов HTML, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.
Во втором примере я использую метод childElementCount , который мне кажется более аккуратным и потенциально более поддерживаемым способом (подробнее обсудим это позже, я не думаю, что у вас возникнут проблемы с пониманием того, что он делает).
Я мог бы попытаться использовать childNodes.length (вместо children.length), но посмотрите на результат:
Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13
Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы - учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.
Проверка существования дочерних узлов
Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает логическое значение, сообщающие об их наличии или отсутствии:
Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // true
Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:
И вот результат нового запуска hasChildNodes() :
Console.log(myList.hasChildNodes()); // true
Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. Данный метод учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:
И теперь в консоль выводится ожидаемый результат:
Console.log(myList.hasChildNodes()); // false
Конечно, если я знаю, что могу столкнуться с пробелом, то сначала я проверю существование дочерних узлов, затем с помощью свойства nodeType определяю, есть ли среди них узлы-элементы.
Добавление и удаление дочерних элементов
Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .
Var myEl = document.createElement("div"); document.body.appendChild(myEl);
В данном случае я создаю
Но вместо вставки специально создаваемого элемента, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Example text
Я могу изменить место расположения списка с помощью следующего кода:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);
Итоговый DOM будет выглядеть следующим образом:
Example text
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.
Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);
Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.
Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);
Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:
Var myList = document.getElementById("myList"); myList.remove();
Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.
Замена дочерних элементов
Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот новый элемент или я создал его с нуля. Вот разметка:
Example Text
Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "example"; myDiv.appendChild(document.createTextNode("New element text")); document.body.replaceChild(myDiv, myPar);
Как видите, метод replaceChild() принимает два аргумента: новый элемент и заменяемый им старый элемент.
Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:
Example text 1
Example text 2
Example text 3
Я могу заменить третий параграф первым параграфом с помощью следующего кода:
Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);
Теперь сгенерированный DOM выглядит так:
Example text 2
Example text 1
Выборка конкретных дочерних элементов
Существует несколько разных способов выбора конкретного элемента. Как показано ранее, я могу начать с использования коллекции children или свойства childNodes . Но взглянем на другие варианты:
Свойства firstElementChild и lastElementChild делают именно то, чего от них можно ожидать по их названию: выбирают первый и последний дочерние элементы. Вернемся к нашей разметке:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Я могу выбрать первый и последний элементы с помощью этих свойств:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Example one" console.log(myList.lastElementChild.innerHTML); // "Example six"
Я также могу использовать свойства previousElementSibling и nextElementSibling , если я хочу выбрать дочерние элементы, отличные от первого или последнего. Это делается сочетанием свойств firstElementChild и lastElementChild:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"
Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.
Вставка контента в DOM
Я уже рассматривал способы вставки элементов в DOM. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента.
Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Example Paragraph
Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом:
Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);
В полученном HTML параграф будет перед списком и это еще один способ перенести элемент.
Example Paragraph
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить.
Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .
Описание
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.
DOCTYPE | Описание |
---|---|
HTML 4.01 | |
Строгий синтаксис HTML. | |
Переходный синтаксис HTML. | |
В HTML-документе применяются фреймы. | |
HTML 5 | |
Для всех документов. | |
XHTML 1.0 | |
Строгий синтаксис XHTML. | |
Переходный синтаксис XHTML. | |
Документ написан на XHTML и содержит фреймы. | |
XHTML 1.1 | |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Синтаксис
Параметры
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег .
Публичность — объект является публичным (значение PUBLIC ) или системным ресурсом (значение SYSTEM ), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC .
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C , это название и пишется в .
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD .
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN ).
URL — адрес документа с DTD.
Закрывающий тег
Не требуется.
Пример 1. HTML 4.01
HTML 4.01 IE Cr Op Sa Fx
Пример 2. HTML 5
HTML5 IE Cr Op Sa Fx
Разум - это Будда, а прекращение умозрительного мышления - это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум - это Будда, что Будда - это сущность разума, и что разум подобен бесконечности.
Браузеры
Internet Explorer до версии 6.0 требует, чтобы стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).
Хотя значение URL является не обязательным, браузеры при его отсутствии могут перейти в режим совместимости, поэтому всегда указывайте полный путь к DTD-файлу, как показано в табл. 1.
указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.
DOCTYPE | Описание |
---|---|
HTML5 | |
Для всех документов. | |
HTML 4.01 | |
"http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML. |
Переходный синтаксис HTML. | |
В HTML-документе применяются фреймы. | |
XHTML 1.0 | |
Строгий синтаксис XHTML. | |
Переходный синтаксис XHTML. | |
Документ написан на XHTML и содержит фреймы. | |
XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. | |
XHTML 1.1 | |
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.
Стандарты HTML и XHTML
HTML - стандартный язык разметки Web-документов.
В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.
Например, тег и атрибут align объявлены устаревшими.
XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.
Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.
Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.
Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:
Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/
Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.
На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.
Следующий вопрос: какой выбрать синтаксис - строгий или переходный?
Строгий и переходный синтаксис HTML 4.01
Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.
Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.
Строгий синтаксис
Проверка на валидность
красным цветом.
Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .
Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .
Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:
Двойной щелчок на знаке валидатора даст развернутый список ошибок:
Поменяем!DOCTYPE на переходный синтаксис:
Переходный синтаксис
Проверка на валидность
Часть текста понадобилось выделить красным цветом.