что значит document в javascript

Введение

Что такое Объектная Модель Документа (DOM)?

Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.

Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.

Стандарты W3C DOM и WHATWG DOM формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.

Например: стандарт DOM описывает, что метод getElementsByTagName в коде, указанном ниже, должен возвращать список всех элементов

DOM и JavaScript

Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:

API (веб либо XML страница) = DOM + JS (язык описания скриптов)

DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:

Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью JavaScript technologies overview.

Каким образом доступен DOM?

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

При создании сценария с использованием элемента

Источник

Объект Document в JavaScript

В JavaScript имеется объект, который отвечает за документ в целом. Этот объект является свойством объекта Window, и используется он безумно часто. Этот объект называется Document. И именно он является свойством объекта Window. Через объект Document в JavaScript мы можем получить доступ к любому элементу нашей страницы.

После запуска скрипта фон станет красным. Давно мы с Вами не писали интересных задач, и пора бы это исправить. Давайте сделаем с Вами мигающий фон:

var counter = 0;
setInterval(blink, 1000);
function blink() <
if (counter % 2 == 0) document.bgColor = «red»;
else document.bgColor = «white»;
counter++;
>

document.linkColor = «green»;
document.vlinkColor = «red»;
document.alinkColor = «blue»;

Думаю, что здесь всё прозрачно. Также заметьте, что это будет работать не всегда. В частности, это зависит от браузера и его настроек. Например, «посещённых ссылок» вообще не будет, если пользователь отключил сохранение истории посещений в браузере.

Ещё одно свойство отвечает за заголовок страницы. Свойство называется title, и давайте его выведем, а затем ещё и поменяем:

document.write(document.title);
document.title = «Title JavaScript»;

И если Вы запустите этот скрипт, то увидите в окне браузера заголовок страницы. А также обратите внимание, что заголовок поменялся на «Title JavaScript«. То есть Вы можете динамическим образом менять заголовки страниц. Например, сделать заголовок страницы в виде бегающей строки. Как это сделать? Делаю подсказку: у Вас должны быть использованы «пробелы«. То есть сначала строка должна быть такой: » Title JavaScript», потом » Title JavaScript». В конце концов, исчезнут «пробелы» и дальше можно будет убирать по одной букве. Это идея, которую Вы могли бы легко реализовать. Если Вы читали до этого все статьи по JavaScript, то должны без проблем сделать такую вещь.

Если Вы изменили страницу и после этого не уходили пить чай, то Вы увидите практически текущее время. Это и есть дата последнего изменения страницы.

В этом простом скрипте проверяется: если «referrer» не пустой, то выводим человеку сообщение о том, откуда он пришёл (например, с поисковой системы). Если свойство referrer оказалось пустым (то есть человек непосредственно ввёл адрес страницы вручную), то тогда ничего не делаем.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 21 ):

На мой взгляд, второй код и его описание содержат разночтения. Переменная counter не отвечает за количество запусков функции blink. В данном коде она отвечает за очередность появления цвета экрана. Это нагляднее будет видно, если второй цвет взять не белый. (Фон браузера) А цветной. Теперь, если мы присвоим переменной counter ноль или четное число, то мигание начнется с красного, а если нечетное, то с другого цвета. Но повторение будет бесконечным. Для того, чтобы ограничить количество запусков функции, нужно добавить еще условие, при достижении которого, запустится метод clearInterval, который и прервет исполнение функции мигания. Я бы переписал этот код так: var counter = 0; var 1000); function blink() < if (counter % 2 == 0) document.bgColor = "red"; else document.bgColor = "blue"; counter++; if (counter == 9) clearInterval(id); >После девяти миганий все замирает. У меня этот код работает, а вот насколько он корректен – сказать не могу.

Михаил, а вы бы не могли подробнее описать и объяснить про бегущую строку в заголовке, что-то я не понимаю как это должно работать. Не могли бы вы продемонстрировать данный скрипт?)Мы будем вам весьма благодарны=)

Алгоритм как здесь: http://myrusakov.ru/skrolling-teksta-na-knopke.html Только вместо кнопки будет document.title

Михаил, но заголовок не видит пробелов. Получается какая-то неполноценная бегущая строка.

Михаил, по поводу второго кода. А как сделать таким способом вместо фона такую же мигающую ссылку? Я заменял bgColor на linkColor, но у меня это не работает.

Ссылка Не работает. А в саму ссылку не нужно ничего вставлять?

В каком браузере смотрите?

Google Chrome и Mozilla не показывают. а Opera и IE норм все.

Источник

Шпаргалка по JS-методам для работы с DOM

Основные источники

Введение

JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.

Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.

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

Сильно погружаться в теорию мы не будем. Вместо этого, мы сосредоточимся на практической составляющей.

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

Вот как будет выглядеть наша начальная разметка:

У нас есть список ( ul ) с тремя элементами ( li ). Список и каждый элемент имеют идентификатор ( id ) и CSS-класс ( class ). id и class — это атрибуты элемента. Существует множество других атрибутов: одни из них являются глобальными, т.е. могут добавляться к любому элементу, другие — локальными, т.е. могут добавляться только к определенным элементам.

Мы часто будем выводить данные в консоль, поэтому создадим такую «утилиту»:

Миксин NonElementParentNode

Данный миксин предназначен для обработки (браузером) родительских узлов, которые не являются элементами.

В чем разница между узлами (nodes) и элементами (elements)? Если кратко, то «узлы» — это более общее понятие, чем «элементы». Узел может быть представлен элементом, текстом, комментарием и т.д. Элемент — это узел, представленный разметкой (HTML-тегами (открывающим и закрывающим) или, соответственно, одним тегом).

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

Для создания элементов используется метод createElement(tag) объекта Document :

Одним из основных способов получения элемента (точнее, ссылки на элемент) является метод getElementById(id) объекта Document :

Почему идентификаторы должны быть уникальными в пределах приложения (страницы)? Потому что элемент с id становится значением одноименного свойства глобального объекта window :

Миксин ParentNode

Данный миксин предназначен для обработки родительских элементов (предков), т.е. элементов, содержащих одного и более потомка (дочерних элементов).

Такая структура называется коллекцией HTML и представляет собой массивоподобный объект (псевдомассив). Существует еще одна похожая структура — список узлов (NodeList ).

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

Наша утилита принимает 4 аргумента: идентификатор, текст, название тега и CSS-класс. 2 аргумента (тег и класс) имеют значения по умолчанию. Функция возвращает готовый к работе элемент. Впоследствии, мы реализуем более универсальный вариант данной утилиты.

Одной из интересных особенностей HTMLCollection является то, что она является «живой», т.е. элементы, возвращаемые по ссылке, и их количество обновляются автоматически. Однако, эту особенность нельзя использовать, например, для автоматического добавления обработчиков событий.

Создадим универсальную утилиту для получения элементов:

Наша утилита принимает 3 аргумента: CSS-селектор, родительский элемент и индикатор количества элементов (один или все). 2 аргумента (предок и индикатор) имеют значения по умолчанию. Функция возвращает либо один, либо все элементы (в виде обычного массива), совпадающие с селектором, в зависимости от значения индикатора:

Миксин NonDocumentTypeChildNode

Миксин ChildNode

Данный миксин предназначен для обработки дочерних элементов, т.е. элементов, являющихся потомками других элементов.

Интерфейс Node

Данный интерфейс предназначен для обработки узлов.

Интерфейс Document

Фрагменты позволяют избежать создания лишних элементов. Они часто используются при работе с разметкой, скрытой от пользователя с помощью тега template (метод cloneNode() возвращает DocumentFragment ).

createTextNode(data) — создает текст

createComment(data) — создает комментарий

importNode(existingNode, deep) — создает новый узел на основе существующего

Интерфейсы NodeIterator и TreeWalker

Интерфейсы NodeIterator и TreeWalker предназначены для обхода (traverse) деревьев узлов. Я не сталкивался с примерами их практического использования, поэтому ограничусь парочкой примеров:

Интерфейс Element

Данный интерфейс предназначен для обработки элементов.

Работа с classList

Работа с атрибутами

insertAdjacentElement(where, newElement) — универсальный метод для вставки новых элементов перед/в начало/в конец/после текущего элемента. Аргумент where определяет место вставки. Возможные значения:

insertAdjacentText(where, data) — универсальный метод для вставки текста

Text — конструктор для создания текста

Comment — конструктор для создания комментария

Объект Document

Свойства объекта location :

reload() — перезагружает текущую локацию

replace() — заменяет текущую локацию на новую

title — заголовок документа

head — метаданные документа

body — тело документа

images — псевдомассив ( HTMLCollection ), содержащий все изображения, имеющиеся в документе

Следующие методы и свойство считаются устаревшими:

Миксин InnerHTML

Геттер/сеттер innerHTML позволяет извлекать/записывать разметку в элемент. Для подготовки разметки удобно пользоваться шаблонными литералами:

Расширения интерфейса Element

Вот несколько полезных ссылок, с которых можно начать изучение этих замечательных инструментов:

Иногда требуется создать элемент на основе шаблонной строки. Как это можно сделать? Вот соответствующая утилита:

Существует более экзотический способ создания элемента на основе шаблонной строки. Он предполагает использование конструктора DOMParser() :

Еще более экзотический, но при этом самый короткий способ предполагает использование расширения для объекта Range — метода createContextualFragment() :

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

Заключение

Разумеется, шпаргалка — это всего лишь карманный справочник, памятка для быстрого восстановления забытого материала, предполагающая наличие определенного багажа знаний.

VDS от Маклауд быстрые и безопасные.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник

JavaScript HTML DOM Document

Объект документа HTML DOM является владельцем всех других объектов на веб-странице.

Объект документа HTML DOM

Объект Document представляет веб-страницу.

Если вы хотите получить доступ к любому элементу на HTML-странице, вы всегда начинаете с доступа к объекту document.

Ниже приведены примеры того, как можно использовать объект Document для доступа к HTML и манипулирования им.

Поиск элементов HTML

Изменение элементов HTML

Добавление и удаление элементов

Добавление обработчиков событий

Поиск объектов HTML

Первый уровень HTML DOM 1 (1998), определенные 11 объектов HTML, коллекции объектов и свойства. Они по-прежнему действительны в HTML5.

Позже, в HTML DOM Level 3, добавлено больше объектов, коллекций и свойств.

Источник

Метод document.write

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.

Метод document.write – один из наиболее древних методов добавления текста к документу.

У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.

Как работает document.write

Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.

Только до конца загрузки

Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.

Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.

Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.

Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.

Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:

Из-за этой особенности document.write для загруженных документов не используют.

В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.

Это лишь одна из причин, по которой XML-режим обычно не используют.

Преимущества перед innerHTML

Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.

Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.

Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).

Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.

Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.

Антипример: реклама

Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:

Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.

Также используют запись:

Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.

Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.

Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.

Итого

Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.

Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.

Запуск после загрузки приведёт к очистке документа.

Метод document.write очень быстр.

В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.

Иногда document.write используют для добавления скриптов с динамическим URL.

Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже.

Источник