Объектная модель документа (DOM) предоставляет программисту целый ряд возможностей, которые очень важны для работы с объектами веб-страницы. Главное — помнить об особенностях данной модели и знать основы объектно-ориентированного программирования.

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

А после создания современного сайта со множеством функций, реализованных благодаря следованию стандартам объектной модели документа, крайне важно обеспечить бесперебойный доступ пользователей к нему. Для персональных сайтов или небольших проектов подойдет виртуальный хостинг. Крупные порталы имеет смысл размещать на виртуальных или выделенных серверах. Студиям веб-разработки, предоставляющим весь спектр услуг — от дизайна до хостинга, могут быть интересны реселлерские программы от ATLEX.Ru.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Основы JavaScript: управление DOM элементами (часть 1) | by ALice | NOP::Nuances of Programming

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

В своей основе сайт должен содержать HTML-документ — index.html. Используя браузер, мы просматриваем сайт, который формирует наш(и) HTML-файл(ы) и любые CSS файлы, которые добавляют стили и правила разметки.

Браузер также создает представление этого документа, известное как объектная модель документа (DOM). Именно с помощью DOM JavaScript способен получать доступ и изменять содержимое элементов на сайте.

Для просмотра DOM в браузере необходимо кликнуть в любом месте на странице и выбрать «Исследовать элемент». После этого откроется вкладка инструментов разработчика, вот так:

DOM отображается во вкладке Elements. Вы также можете увидеть его, выбрав вкладку Console и напечатав “document”.

Объект Document

Объект document — это встроенный объект, содержащий много свойств и методов.

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

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

Попробуем сделать нашу первую манипуляцию DOM…

Зайдите на сайт www.google.com и откройте панель разработчика. Затем выберете вкладку Console и напечатайте следующее:

document.body.style.backgroundColor = ‘orange’;

Нажмите enter и вы увидите, что фон поменялся на оранжевый.

Конечно, вы не изменили исходный код Google (!), но вы изменили то, как содержимое отображается в вашем браузере, управляя объектом document.

Document — это объект, body— это свойство, которое мы решили изменить, обратившись к атрибуту style и изменив его свойство backgroundColor на оранжевый.

Обратите внимание на регистр backgroundColor в JavaScript, вместо background-color, используемого в CSS. Любое свойство, прописанное через дефис в JavaScript, будет писаться в CamelCase.

Вы можете увидеть изменения DOM в элементе body во вкладке Elements или написав document. body в консоль.

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

Ввиду разметки DOM, его часто называют деревом DOM.

Дерево состоит из объектов, называемых узлами. Существует множество типов узлов, но чаще всего вы будете работать с узлами элементов (HTML-элементами), текстовыми узлами (любое текстовое содержимое), а также с комментариями (закомментированный код). Объект document находится в собственном узле, который располагается в корне.

<!DOCTYPE html>
<html>  <head>
<title>Nodes</title>
</head>  <body>
<h2>This is an element node</h2>
<!-- This is a comment node -->
This is a text node.
</body></html>

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

В коде выше узел html элемента является родительским узлом, а head и body элементы являются соседними. Body содержит три дочерних узла (которые являются соседними по отношению друг к другу — как в семейном дереве). Мы рассмотрим это подробнее позже.

Как определить тип узла

Так как каждый узел в документе имеет тип, мы можем получить к нему доступ, используя свойство nodeType. Полный список типов узлов вы можете просмотреть здесь.

Посмотрим на пару примеров типов из нашего предыдущего примера:

<html>, <title>, <body> и <h2> относятся к типу ELEMENT_NODE со значением 1.

Текст This is a text node., расположенный внутри body, не являющегося частью элемента, это TEXT_NODE со значением 3.

Наш комментарий <!-- This is a comment node --> — это COMMENT_NODE со значением 8.

Как проверить тип узла?

Перейдите во вкладку Elements в панели разработчика и кликните на любую строку. Вы увидите значение == $0 рядом. Теперь, если вы перейдете во вкладку Console и введете $0 , отобразится выбранный вами ранее элемент. Для проверки типа узла наберите:

$0.nodeType;

Будет отображено числовое значение выбранного узла. Например, если вы выбрали h2, вы увидите 1. Для текста значение будет 3, а для комментария 8.

И когда вы узнаете, где располагается узел в DOM, вам не нужно будет выбирать его вручную, вы можете обратиться к нему напрямую:

document.body.nodeType; // 1

Также вы можете использовать nodeValue для получения значения текста или комментария и nodeName для отображения названия тэга, содержащего элемент.

Заключение

В данной статье мы рассмотрели понятие DOM дерева, элементов DOM, объект document и узлы. В следующей части мы рассмотрим, как получать доступ к DOM элементам.

Читайте также:

Читайте нас в Телеграмме: https://t.me/nuancesprog
И ВК: https://vk.com/nuancesprog

Сочинение Что такое Дом (рассуждение 15.3 9 класс)

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

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

Становится жаль людей, которые не могут расслабиться дома. Бывает так, что  родителей не интересует благополучие ребёнка, поэтому происходят ссоры, даже драки. Трудно представить, как можно жить без заботы и ласки. В таких условиях дети становятся одинокими, замкнутыми и агрессивными. Сложно понять, что чувствуют бездомные, ведь именно они в большей степени лишены семейного уюта. Бездомные спят на улице в минусовую погоду, без еды, воды, в антисанитарных условиях.

Дом-это место, в котором находится самое ценное, но далеко не материальное. Никто не поспорит, что приятно думать о возвращении домой, в котором по тебе скучают. Это понятие не означает только здание, потому что пустое помещение, пусть даже с мебелью и бытовой техникой не принесёт обитателю радости. Кого-то ждут родные люди, кого-то животные. Они поддержат, успокоят, чтобы не случилось.

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

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

Таким образом, дом-это там, где человека ценят, любят и понимают. Человек-это психосоциальное существо, поэтому он не может жить без общения, поддержки, заботы, которые он чаще всего получает дома. Иначе появится очень неприятное ощущение одиночества. Всегда хочется находиться в месте, в котором не будут ругать за ошибки, дадут жизненный совет, приласкают.

Вариант 2

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

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

Память о доме, который у каждого свой, вызывает самые нежные чувства. Но главное, что связывает понятия о доме всех людей на планете – это присутствие чувства безопасности и уюта. Атмосфера, где человек провел важные минуты своей жизни, незабываема. Времяпровождение в стенах родного уголка – самое счастливое. Ведь не случайно нас там ждет поддержка и покой, там всегда царит взаимопонимание и помощь в решении разных вопросов.  

Ярким примером неравнодушного отношения к своей малой родине, к месту, где родился и вырос, являются произведения В. Распутина. Духовный мир положительных героев повести «Прощание с Матерой» богат. Об этом говорят их мысли, что мы не выбираем дом, который для них остается центром, несмотря на уничтожение. Этот «кусочек» — вечная память, которой они остаются преданы, готовые защищать до смерти.

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

Что такое Дом

Несколько интересных сочинений

• Тема Родины в творчестве Цветаевой (в лирике, стихах, произведениях) сочинение 11 класс

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

• Образ учителя в рассказе Уроки французского Распутина

  В рассказе В. Распутина «Уроки Французского» главная героиня — учительница французского языка, единственная, кто помог и поддержал мальчика в трудной жизненной ситуации. При прочтении произведения мы видим

• Сочинение Почему особенно важно сохранять связь поколений в XXI веке?

  Связь поколений необходимо сохранять всегда. Особенно важным это становиться в XXI веке. Постараемся в своём рассуждении раскрыть данный тезис.

• Сочинение Смерть Андрия в произведении Тарас Бульба

  Трудно представить более драматичный сюжет, чем совершенное отцом убийство сына. И при этом, симпатии читателя остаются на стороне родителя. Почему автор выбрал такое шокирующее развитие сюжета?

• Главные герои сказки Дюймовочка Андерсена (характеристика)

  Сказка Г. Х. Андерсена под названием «Дюймовочка» после первого прочтения оставляет в душе и детей, и взрослый глубокий след. Это связано с тем, что переживая вместе с героями

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

DOM — это внутреннее представление веб-страницы в браузере. Когда браузер получает ваш HTML-код с вашего сервера, парсер анализирует структуру вашего кода и создает его модель. На основе этой модели браузер затем отображает страницу на экране.

Браузеры предоставляют API, который можно использовать для взаимодействия с DOM. Вот как работают современные JavaScript-фреймворки — они используют DOM API, чтобы сообщить браузеру, что отображать на странице.

В одностраничных приложениях DOM постоянно изменяется, чтобы отражать то, что отображается на экране, и как разработчик вы можете проверить это, используяИнструменты разработчика браузера.

DOM не зависит от языка, и де-факто стандартом для доступа к DOM является использованиеJavaScript, поскольку это единственный язык, на котором могут работать браузеры.

Модель DOM стандартизирована WHATWG вDOM Living Standard Spec.

С помощью JavaScript вы можете взаимодействовать с DOM, чтобы:

• проверить структуру страницы
• доступ к метаданным и заголовкам страницы
• отредактировать стиль CSS
• прикрепить или удалить прослушиватели событий
• редактировать любой узел на странице
• изменить любой атрибут узла

.. и многое другое.

Два основных объекта, предоставляемых DOM API, с которыми вы будете больше всего взаимодействовать:documentиwindow.

Объект Window

ВwindowОбъект представляет окно, содержащее документ DOM.

window.documentуказывает наdocumentобъект загружен в окно.

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

Характеристики

Вот список полезных свойств, на которые вы, вероятно, будете часто ссылаться:

• consoleуказывает на консоль отладки браузера. Полезно для печати сообщений об ошибках или ведения журнала, используяconsole.log,console.errorи другие инструменты (см.Браузер DevToolsстатья)
• documentкак уже было сказано, указывает наdocumentобъект, ключ к взаимодействиям с DOM, которые вы будете выполнять
• historyдает доступ кAPI истории
• locationдает доступ кИнтерфейс местоположения, из которого вы можете определить URL, протокол, хэш и другую полезную информацию.
• localStorageссылка наAPI веб-хранилищаlocalStorage объект
• sessionStorageссылка на объект sessionStorage API веб-хранилища

Методы

Вwindowобъект также предоставляет полезные методы:

• alert(): который вы можете использовать для отображения диалоговых окон предупреждений
• postMessage(): используетсяChannel Messaging API
• requestAnimationFrame(): используется для выполнения анимации, одновременно производительной и легкой для процессора.
• setInterval(): вызывать функцию каждые n миллисекунд, пока интервал не будет очищен с помощьюclearInterval()
• clearInterval(): очищает интервал, созданный с помощьюsetInterval()
• setTimeout(): выполнить функцию через ‘n’ миллисекунд
• setImmediate(): выполнить функцию, как только браузер будет готов
• addEventListener(): добавить в документ прослушиватель событий
• removeEventListener(): удалить прослушиватель событий из документа

См. Полный справочник всех свойств и методовwindowобъект вhttps://developer.mozilla.org/en-US/docs/Web/API/Window

Объект Document

Вdocumentобъект представляет собой дерево DOM, загруженное в окно.

Вот представление части модели DOM, указывающей на теги head и body:

Вот представление части DOM, показывающей тег заголовка, содержащий тег заголовка с его значением:

Вот представление части модели DOM, показывающей тег тела, содержащий ссылку, со значением и атрибут href с его значением:

Доступ к объекту Document можно получить изwindow. document, и с тех порwindowэто глобальный объект, вы можете использовать ярлыкdocumentобъект прямо из консоли браузера или в вашем коде JavaScript.

Этот объект Document имеет массу свойств и методов. ВСелекторы APIметоды — это те, которые вы, вероятно, будете использовать чаще всего:

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()
• document.getElementsByTagName()
• document.getElementsByClassName()

Вы можете получить название документа, используяdocument.title, и URL-адрес, использующийdocument.URL. Реферер доступен вdocument.referrer, домен вdocument.domain.

Отdocumentобъект вы можете получить тело и головуУзлы элементов:

• document.documentElement: узел документа
• document.body: thebodyУзел элемента
• document. head: theheadУзел элемента

Вы также можете получить список всех узлов элементов определенного типа, напримерHTMLCollectionвсех ссылок, использующихdocument.links, все изображения, использующиеdocument.images, все формы, использующиеdocument.forms.

Документпеченьедоступны вdocument.cookie. Дата последнего изменения вdocument.lastModified.

Вы можете сделать гораздо больше, даже получитьстарая школаи заполните свои скриптыdocument.write(), метод, который часто использовался еще на заре JavaScript для взаимодействия со страницами.

См. Полный справочник всех свойств и методовdocumentобъект вhttps://developer.mozilla.org/en-US/docs/Web/API/Document

Типы узлов

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

• Документ: узел документа, начало дерева
• Элемент: тег HTML
• Attr: атрибут тега
• Текст: текстовое содержимое элемента или узла атрибута
• Комментарий: комментарий HTML
• Тип документа: theDoctypeдекларация

Обход DOM

DOM — это дерево элементов с узлом Document в корне, который указывает наhtmlУзел элемента, который, в свою очередь, указывает на узлы его дочерних элементовheadиbody, и так далее.

Из каждого из этих элементов вы можете перемещаться по структуре DOM и переходить к разным узлам.

Получение родителя

Каждый элемент имееттолько одинродитель.

Чтобы получить это, вы можете использоватьNode.parentNodeили жеNode.parentElement(где Node означает узел в DOM).

Они почти такие же, за исключением случаев, когда запускались наhtmlэлемент:parentNodeвозвращает родителя указанного узла в дереве DOM, аparentElementвозвращает родительский элемент узла DOM или null, если узел либо не имеет родителя, либо его родительский элемент не является элементом DOM.

Обычно люди используютparentNode.

Получение детей

Чтобы проверить, есть ли у узла дочерние узлы, используйтеNode.hasChildNodes()который возвращает логическое значение.

Чтобы получить доступ ко всем узлам дочерних элементов узла, используйтеNode. childNodes.

DOM также предоставляетNode.childrenметод. Однако он включает не только узлы Element, но и пустое пространство между элементами как узлы Text. Это не то, чего вы обычно хотите.

Чтобы получить первый дочерний элемент Element Node, используйтеNode.firstElementChild. Чтобы получить последний дочерний узел элемента, используйтеNode.lastElementChild:

DOM также предоставляетNode.firstChildиNode.lastChild, с той разницей, что они не «фильтруют» дерево только по узлам элемента. Они также будут отображать пустые текстовые узлы, обозначающие пробелы.

Короче говоря, для навигации по дочерним узлам элементов используйте

• Node.childNodes
• Node.firstElementChild
• Node.lastElementChild

Получение братьев и сестер

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

Вы можете сделать это, используя

• Node.previousElementSibling
• Node.nextElementSibling

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

Редактирование DOM

Модель DOM предлагает различные методы для редактирования узлов страницы и изменения дерева документа.

С

• document.createElement(): создает новый узел элемента
• document.createTextNode(): создает новый текстовый узел

вы можете создавать новые элементы и добавлять их к элементам DOM, которые вы хотите использовать в качестве дочерних, используяdocument.appendChild():

const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))

• first. removeChild(second)удаляет дочерний узел «второй» из узла «первый».
• document.insertBefore(newNode, existingNode)вставляет «newNode» как родственный элемент «existingNode», помещая его перед ним в древовидной структуре DOM.
• element.appendChild(newChild)изменяет дерево под «элементом», добавляя к нему новый дочерний узел «newChild» после всех остальных дочерних элементов.
• element.prepend(newChild)изменяет дерево в разделе «element», добавляя к нему новый дочерний узел «newChild» перед другими дочерними элементами. Вы можете передать один или несколько дочерних узлов или даже строку, которая будет интерпретироваться как текстовый узел.
• element.replaceChild(newChild, existingChild)изменяет дерево в разделе «element», заменяя «existingChild» новым узлом «newChild».
• element.insertAdjacentElement(position, newElement)вставляет «newElement» в DOM, позиционируя его относительно «element» в зависимости от значения параметра «position». Посмотреть возможные значения.
• element.textContent = 'something'изменяет содержимое узла Text на «что-то».

Больше руководств по браузеру:

Модель объектов XML-документов (DOM) | Microsoft Docs

• 05/14/2021
• Чтение занимает 2 мин

В этой статье

Класс XML DOM является представлением XML-документа в памяти. Модель DOM позволяет читать, обрабатывать и изменять XML-документ программным образом. Класс XmlReader также читает XML, но предоставляет только последовательный доступ для чтения без поддержки кэширования. Это значит, что XmlReader не позволит изменять значения атрибутов или содержимое элемента, а также вставлять и удалять узлы. Изменение — основная функция модели DOM. Это стандартизованный, структурированный способ представления XML-данных в памяти, хотя на самом деле данные XML хранятся в файлах и пересылаются из других объектов в строковом виде. Далее приведен пример XML-данных.

Входные данные

<?xml version="1.0"?>
  <books>
    <book>
        <author>Carson</author>
        <price format="dollar">31.95</price>
        <pubdate>05/01/2001</pubdate>
    </book>
    <pubinfo>
        <publisher>MSPress</publisher>
        <state>WA</state>
    </pubinfo>
  </books>

Далее показано, какая структура будет создана в памяти, когда эти XML-данные считываются в модель структуры DOM.

Структура XML-документа

Каждый круг на этой иллюстрации представляет собой узел в структуре XML-документа, называемый объектом XmlNode. Объект XmlNode является базовым объектом дерева DOM. Класс XmlDocument, расширяющий класс XmlNode, поддерживает методы для операций над документом в целом (например, для загрузки его в память или сохранения XML в файл). Кроме того, XmlDocument предоставляет возможности для просмотра узлов всего XML-документа и выполнения операций над ними. И XmlNode, и XmlDocument обладают улучшенной производительностью, расширенной функциональностью и содержат методы и свойства, которые позволяют следующее.

• Получать доступ к DOM-специфичным узлам, например к узлам элементов, узлам ссылок на сущности и т. п., и изменять эти узлы.

• Получать целые узлы помимо содержащейся в них информации, например текста в узле элемента.

  Примечание

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

Объекты Node обладают набором методов и свойств, а также хорошо определенных базовых характеристик. Вот некоторые из этих характеристик:

• У каждого узла есть один родительский узел, то есть узел, находящийся непосредственно над данным. Единственный узел, не имеющий родителя — корневой узел документа, так как это узел верхнего уровня, содержащий сам документ и его фрагменты.

• У большинства узлов может быть несколько дочерних узлов, то есть узлов, расположенных непосредственно под ними. Далее следует список типов узлов, которые могут иметь дочерние узлы:

  Узлы XmlDeclaration, Notation, Entity, CDATASection, Text, Comment, ProcessingInstruction и DocumentType не могут иметь дочерних узлов.

• Узлы, находящиеся на одном уровне наследования, например узлы book и pubinfo на нашей схеме, называются одноуровневыми.

Одна из характеристик модели DOM — способ обработки атрибутов. Атрибуты не являются узлами, состоящими в родительских, дочерних и одноуровневых связях. Атрибуты считаются собственностью узла элемента и представляют собой пару «имя-значение». Например, если XML-данные представляют собой конструкцию format="dollar, связанную с элементом price, слово format является именем атрибута, а значением атрибута format является dollar. Чтобы получить атрибут format="dollar" узла price, воспользуйтесь методом GetAttribute, когда курсор расположен в узле элемента price. Дополнительные сведения см. в статье Доступ к атрибутам в модели DOM.

По мере считывания XML-документа в память создаются узлы. Узлы бывают разных типов. Правила и синтаксис XML-элемента отличаются от правил и синтаксиса инструкции по обработке. Поэтому по мере считывания разнообразных данных каждому узлу присваивается тип. Тип узла определяет его характеристики и функциональность.

Дополнительные сведения о типах узлов, создаваемых в памяти, см. в статье Типы XML-узлов. Дополнительные сведения об объектах, создаваемых в дереве узлов, см. в статье Сопоставление объектной иерархии с XML-данными.

Корпорация Майкрософт расширила API-интерфейсы, доступные в DOM уровней 1 и 2 W3C, чтобы облегчить работу с XML-документами. Дополнительные классы, методы и свойства полностью совместимы со стандартами W3C и добавляют дополнительную функциональность по сравнению с возможностями W3C XML DOM. Новые классы позволяют получить доступ к реляционным данным, предоставляют методы синхронизации с данными ADO.NET, одновременно делая эти данные доступными в виде XML. Дополнительные сведения см. в статье о синхронизации DataSet с XmlDataDocument.

Модель DOM чрезвычайно полезна для считывания XML-данных в память, изменения их структуры, добавления и удаления узлов, изменения данных, принадлежащих узлу (например, текста, содержащегося в документе). Однако существуют и другие классы, которые в некоторых ситуациях работают быстрее модели DOM. Классы XmlReader и XmlWriter предоставляют быстрый последовательный потоковый доступ к XML без поддержки кэширования. Если вам нужен произвольный доступ с моделью курсора и XPath, используйте класс XPathNavigator.

См. также

Введение в DOM — веб-API

Объектная модель документа ( DOM ) представляет собой представление данных объектов. которые составляют структуру и содержание документа в сети. Это руководство познакомит вас с DOM, посмотрите, как DOM представляет HTML-документ в памяти и как использовать API для создания веб-контента и приложений.

Объектная модель документа (DOM) — это программный интерфейс для веб-документов. Он представляет страницу, так что программы могут изменять структуру, стиль и содержимое документа.DOM представляет документ как узлы и объекты; таким образом языки программирования могут взаимодействовать со страницей.

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

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

в документе:

  const параграфы = документ.querySelectorAll ("p");


предупреждение (параграфы [0] .nodeName);
  

Все свойства, методы и события, доступные для управления и создания веб-страниц, организованы в объекты. Например, объект документа , который представляет сам документ, любые объекты table , которые реализуют интерфейс DOM HTMLTableElement, для доступа к таблицам HTML, и так далее, являются объектами.

Модель DOM построена с использованием нескольких API-интерфейсов, которые работают вместе.Ядро DOM определяет сущности описание любого документа и объектов в нем. Это расширяется по мере необходимости другими API, которые добавляют новые функции и возможности в DOM. Например, API HTML DOM добавляет поддержку представления HTML-документов в основной DOM, а в SVG API добавлена ​​поддержка представления документов SVG.

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

DOM не является частью языка JavaScript, но вместо этого это веб-API, используемый для создания веб-сайтов.JavaScript также можно использовать в других контекстах. Например, Node.js запускает программы JavaScript на компьютере, но предоставляет другой набор API, а DOM API не является основной частью среды выполнения Node.js.

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

 
импортировать xml.dom.minidom как м
doc = m.parse (r "C: \ Projects \ Py \ chap1.xml")
doc.nodeName
p_list = doc.getElementsByTagName ("параграф")
  

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

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

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

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

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

В следующей таблице кратко описаны эти типы данных.

Тип данных (интерфейс)	Описание
Документ	Когда член возвращает объект типа , документ (e.г., ownerDocument свойство элемента возвращает документ , которому он принадлежит), этот объект является корневым документ сам объект. В DOM документ Ссылка Глава описывает документ объект.
Узел	Каждый объект, расположенный в документе, является своего рода узлом. В HTML-документ, объект может быть узлом элемента, но также текстовым узлом или узел атрибута.
Элемент	Элемент типа основан на узле . Это относится элементу или узлу типа элемент , возвращенный член DOM API. Вместо того, чтобы говорить, например, что document.createElement () метод возвращает ссылка на объект node , мы просто говорим, что этот метод возвращает элемент , который только что был создан в DOM. элемент объектов реализуют DOM Элемент интерфейс, а также более простой Интерфейс узла , оба из которых включены вместе в этот ссылка. В HTML-документе элементы дополнительно улучшаются за счет HTML DOM API HTMLElement интерфейс, а также другие интерфейсы, описывающие возможности определенных видов элементов (например, HTMLTableElement для <таблица> элементов).
Список узлов	nodeList - это массив элементов, подобный тому типу, который возвращается методом документ. querySelectorAll () . Пункты в Доступ к списку узлов осуществляется по индексу одним из двух способов: Эти два эквивалента. В первом, элемент () - это single для объекта nodeList . Последний использует типичный синтаксис массива для извлечения второго элемента в списке.
Attr	Когда атрибут возвращается членом (например, createAttribute () ), это ссылка на объект, предоставляет специальный (хотя и небольшой) интерфейс для атрибутов. Атрибуты являются узлами в DOM, как и элементы, хотя вы можете редко использовать их как таковые.
NamedNodeMap	namedNodeMap похож на массив, но доступ к элементам по имени или индексу, хотя последний случай просто удобен для перечисление, поскольку они не в определенном порядке в списке. А namedNodeMap имеет для этого метод item () цели, а также вы можете добавлять и удалять элементы из namedNodeMap .

Следует также помнить о некоторых общих соображениях по терминологии. Обычно на любой узел Attr ссылаются как на атрибут , например, а на массив узлов DOM - как на nodeList . Вы найдете эти и другие термины, которые будут использоваться в документации.

Это руководство посвящено объектам и фактическим вещам , которые вы можете использовать для управления иерархией DOM. Есть много моментов, в которых понимание того, как это работает, может сбивать с толку. Например, объект, представляющий элемент HTML form , получает свое свойство name из интерфейса HTMLFormElement , но свое свойство className из интерфейса HTMLElement . В обоих случаях нужное свойство находится в этом объекте формы.

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

Интерфейсы и объекты

Многие объекты заимствуют из нескольких различных интерфейсов. Объект таблицы, например, реализует специализированный интерфейс HTMLTableElement , который включает такие методы, как createCaption и insertRow .Но поскольку это также HTML-элемент, таблица реализует интерфейс Element , описанный в справочной главе DOM Element . И, наконец, поскольку элемент HTML также, с точки зрения DOM, является узлом в дереве узлов, составляющих объектную модель для страницы HTML или XML, объект таблицы также реализует более простой интерфейс Node , от которого происходит Элемент .

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

  const table = document.getElementById («таблица»);
const tableAttrs = table.attributes;
for (let i = 0; i  

Основные интерфейсы в DOM

В этом разделе перечислены некоторые из наиболее часто используемых интерфейсов в DOM. Идея состоит не в том, чтобы описать здесь, что делают эти API, а в том, чтобы дать вам представление о методах и свойствах, которые вы будете очень часто видеть при использовании DOM.Эти общие API используются в более длинных примерах в главе «Примеры DOM» в конце этой книги.

Документ и окно Объекты - это объекты, интерфейсы которых вы обычно чаще всего используете в программировании DOM. Проще говоря, объект window представляет что-то вроде браузера, а объект документа является корнем самого документа. Элемент наследуется от общего интерфейса Node , и вместе эти два интерфейса предоставляют многие методы и свойства, которые вы используете для отдельных элементов.Эти элементы могут также иметь определенные интерфейсы для работы с данными, которые хранятся в этих элементах, как в примере объекта table в предыдущем разделе.

Ниже приводится краткий список общих API-интерфейсов в веб-сценариях и сценариях XML-страниц с использованием DOM.

Следующий простой пример иллюстрирует использование DOM Document API - в частности, он иллюстрирует использование свойства body API Document для изменения:

• цвет текста документа
• цвет фона документа
• цвет ссылки документа (то есть цвет любых гипертекстовых ссылок в любом месте документа)

  

  
  <сценарий>
    function setBodyAttr (attr, value) {
      если (документ. body) document.body [attr] = значение;
      иначе выбросить новую ошибку («нет поддержки»);
    }
  


  

    <форма>
      
   текст   
      
         черный 
         красный 
      
      
   bgColor   
      
         белый 
         серый 
      
      
   ссылка   
      
         синий 
         зеленый 
      
      <маленький>
         tld / page.html ">
          (образец ссылки)
        
      
    
  


  

Результат

HTML DOM API - веб-API

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

Функциональные области, включенные в HTML DOM API, включают:

• Доступ и управление элементами HTML через DOM.
• Доступ к данным формы и манипулирование ими.
• Взаимодействие с содержимым 2D-изображений и контекстом HTML , например, для рисования поверх них.
• Управление мультимедиа, подключенным к элементам мультимедиа HTML ( и ).
• Перетаскивание содержимого веб-страниц.
• Доступ к истории навигации браузера
• Поддерживающие и соединяющие интерфейсы для других API, таких как веб-компоненты, веб-хранилище, веб-рабочие, WebSocket и события, отправленные сервером.

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

Структура документа HTML

Объектная модель документа (DOM) - это архитектура, которая описывает структуру документа ; каждый документ представлен экземпляром интерфейса Документ .Документ, в свою очередь, состоит из иерархического дерева из узлов , в котором узел представляет собой фундаментальную запись, представляющую один объект в документе (например, элемент или текстовый узел).

Узлы могут быть строго организационными, предоставляя средства для группировки других узлов вместе или для обеспечения точки, в которой может быть построена иерархия; другие узлы могут представлять видимые компоненты документа. Каждый узел основан на интерфейсе Node , который предоставляет свойства для получения информации об узле, а также методы для создания, удаления и организации узлов в DOM.

Узлы не имеют понятия о включении содержимого, которое фактически отображается в документе. Это пустые сосуды. Фундаментальное понятие узла, который может представлять визуальный контент, вводится интерфейсом Element . Экземпляр объекта Element представляет отдельный элемент в документе, созданном с использованием словаря HTML или XML, такого как SVG.

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

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

Среди вещей, добавленных в Документ стандартом HTML:

• Поддержка доступа к различной информации, предоставляемой заголовками HTTP при загрузке страницы, такой как местоположение, из которого был загружен документ, файлы cookie, дата изменения, ссылающийся сайт и т. Д.
• Доступ к спискам элементов в блоке и теле документа , а также к спискам изображений, ссылок, скриптов и т. Д., Содержащихся в документе.
• Поддержка взаимодействия с пользователем путем проверки фокуса и выполнения команд над редактируемым содержимым.
• Обработчики событий для событий документа, определенных стандартом HTML, чтобы разрешить доступ к событиям мыши и клавиатуры, перетаскиванию, управлению мультимедиа и многому другому.
• Обработчики событий для событий, которые могут быть доставлены как элементам, так и документам; в настоящее время они включают только действия копирования, вырезания и вставки.

Интерфейсы элементов HTML

Интерфейс Element был дополнительно адаптирован для представления элементов HTML, в частности, путем введения интерфейса HTMLElement , от которого наследуются все более конкретные классы элементов HTML.Это расширяет класс Element для добавления специфичных для HTML общих функций к узлам элементов. Свойства, добавленные HTMLElement , включают, например, hidden и innerText . HTMLElement также добавляет все глобальные обработчики событий.

Документ HTML - это дерево DOM, в котором каждый из узлов является элементом HTML, представленным интерфейсом HTMLElement . Класс HTMLElement , в свою очередь, реализует узел Node , поэтому каждый элемент также является узлом (но не наоборот).Таким образом, структурные функции, реализованные в интерфейсе Node , также доступны для элементов HTML, что позволяет вкладывать их друг в друга, создавать и удалять, перемещать и т. Д.

Интерфейс HTMLElement является универсальным, однако предоставляет только функциональные возможности, общие для всех элементов HTML, такие как идентификатор элемента, его координаты, HTML, составляющий элемент, информацию о позиции прокрутки и т. Д.

Чтобы расширить функциональные возможности основного интерфейса HTMLElement для обеспечения функций, необходимых конкретному элементу, класс HTMLElement разделен на подклассы для добавления необходимых свойств и методов.Например, элемент представлен объектом типа HTMLCanvasElement . HTMLCanvasElement дополняет тип HTMLElement , добавляя такие свойства, как height и такие методы, как getContext () , для обеспечения функций, специфичных для холста.

Общее наследование для классов элементов HTML выглядит следующим образом:

Таким образом, элемент наследует свойства и методы всех своих предков.Например, рассмотрим элемент , который представлен в DOM объектом типа HTMLAnchorElement . Таким образом, элемент включает свойства и методы, специфичные для привязки, описанные в документации этого класса, а также те, которые определены в HTMLElement и Element , а также из Node и, наконец, EventTarget .

Каждый уровень определяет ключевой аспект полезности элемента. От узла Node элемент наследует концепции, связанные со способностью элемента содержаться в другом элементе и содержать другие элементы.Особое значение имеет то, что достигается путем наследования от EventTarget : способность получать и обрабатывать такие события, как щелчки мыши, события воспроизведения и паузы и т. Д.

Есть элементы, которые имеют общие черты и, следовательно, имеют дополнительный промежуточный тип. Например, элементы и оба представляют аудиовизуальные носители. Соответствующие типы, HTMLAudioElement и HTMLVideoElement , оба основаны на общем типе HTMLMediaElement , который, в свою очередь, основан на HTMLElement и так далее. HTMLMediaElement определяет методы и свойства, которые являются общими для аудио- и видеоэлементов.

Эти специфичные для элементов интерфейсы составляют большую часть API HTML DOM, и им посвящена данная статья. Чтобы узнать больше о фактической структуре DOM, см. Введение в DOM.

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

Большинство интерфейсов, составляющих HTML DOM API, почти однозначно сопоставляют отдельные элементы HTML или небольшую группу элементов с аналогичной функциональностью. Кроме того, API HTML DOM включает несколько интерфейсов и типов для поддержки интерфейсов элементов HTML.

Интерфейсы элементов HTML

Эти интерфейсы представляют определенные элементы HTML (или наборы связанных элементов, которые имеют одинаковые свойства и методы, связанные с ними).

Устаревшие интерфейсы элементов HTML

Устаревшие интерфейсы элементов HTML

Интерфейсы интеграции веб-приложения и браузера

Эти интерфейсы предлагают доступ к окну браузера и документу, содержащему HTML, а также к состоянию браузера, доступным плагинам (если есть) и различным параметрам конфигурации.

Устаревшие интерфейсы интеграции веб-приложений и браузера

Устаревшие интерфейсы интеграции веб-приложений и браузеров

Интерфейсы поддержки форм

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

  const nameField = document.getElementById ("имя пользователя");
const sendButton = document.getElementById ("sendButton")

sendButton.disabled = true;



nameField.addEventListener ("input", event => {
  const elem = event.target;
  const valid = elem.value.length! = 0;

  if (действительный && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (! valid &&! sendButton.disabled) {
    sendButton.disabled = true;
  }
});
  

  
 Предоставьте информацию ниже. Пункты, отмеченные знаком «*», являются обязательными.

  

     Ваше имя: 
     (*)
  
  

     Электронная почта: 
    
  
  

  

  
<люди>
  
    

    

  

  
    

    

    

  

  

  var doc = document.реализация.createDocument ("", "", null);
var peopleElem = doc.createElement ("люди");

var personElem1 = doc.createElement ("человек");
personElem1.setAttribute ("имя", "Эрик");
personElem1.setAttribute ("средний начальный", "h");
personElem1.setAttribute ("фамилия", "юнг");

var addressElem1 = doc.createElement ("адрес");
addressElem1.setAttribute ("улица", "Южная улица 321");
addressElem1.setAttribute ("город", "денвер");
addressElem1.setAttribute ("состояние", "co");
addressElem1.setAttribute ("страна", "США");
personElem1.appendChild (адресElem1);

var addressElem2 = doc.createElement ("адрес");
addressElem2.setAttribute ("улица", "главная улица, 123");
addressElem2.setAttribute ("город", "арлингтон");
addressElem2.setAttribute ("состояние", "ма");
addressElem2.setAttribute ("страна", "США");
personElem1.appendChild (адресElem2);

var personElem2 = doc.createElement ("человек");
personElem2.setAttribute ("имя", "джед");
personElem2.setAttribute ("фамилия", "коричневый");

var addressElem3 = doc.createElement ("адрес");
адресElem3.setAttribute ("улица", "северная улица 321");
addressElem3.setAttribute ("город", "атланта");
addressElem3.setAttribute ("состояние", "га");
addressElem3.setAttribute ("страна", "США");
personElem2.appendChild (адресElem3);

var addressElem4 = doc.createElement ("адрес");
addressElem4.setAttribute ("улица", "западная улица 123");
addressElem4.setAttribute ("город", "сиэтл");
addressElem4.setAttribute ("состояние", "ва");
addressElem4.setAttribute ("страна", "США");
personElem2.appendChild (addressElem4);

var addressElem5 = док.createElement ("адрес");
addressElem5.setAttribute ("улица", "Южный проспект, 321");
addressElem5.setAttribute ("город", "денвер");
addressElem5.setAttribute ("состояние", "со");
addressElem5.setAttribute ("страна", "США");
personElem2.appendChild (addressElem5);

peopleElem.appendChild (personElem1);
peopleElem.appendChild (personElem2);
doc.appendChild (peopleElem);
  

  {
  "люди": {
    "человек": [{
      "адрес": [{
        "@street": "южная улица 321",
        "@city": "денвер",
        "@state": "co",
        "@country": "usa"
      }, {
        "@street": "главная улица, 123",
        "@city": "арлингтон",
        "@state": "ma",
        "@country": "usa"
      }],
      "@ first-name": "eric",
      "@ middle-initial": "H",
      "@ фамилия": "юнг"
    }, {
      "адрес": [{
        "@street": "северная улица, 321",
        "@city": "атланта",
        "@state": "га",
        "@country": "usa"
      }, {
        "@street": "Западная улица, 123",
        "@city": "сиэтл",
        "@state": "wa",
        "@country": "usa"
      }, {
        "@street": "Южный проспект, 321",
        "@city": "денвер",
        "@state": "co",
        "@country": "usa"
      }],
      "@ first-name": "jed",
      "@ фамилия": "коричневый"
    }]
  }
}
  

      <ТАБЛИЦА>
      
      
       Шэди Гроув 
       Эолийские 
      
      
       За рекой, Чарли 
       Дориан 
      
      
      
     

        
 Это собака & amp; кот 
       

    ...   
  
 Пример сайта 
  
 
 ...