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

В Интернете существуют разновидности документов, но в этом посте, который нас обеспокоен, – это документ «Язык на языке гипертекстовой разметки» (HTML), особенно, особенно как веб -браузер анализируется и интерпретирует документ под капюшоном.

Теперь вы можете спросить: как это связано с заголовком поста – модели объекта документа? Все.

Модель объекта документа или DOM для краткости состоит из трех слов:

Документ
Объект
Модель

В этом контексте документ это наш HTML документ , объект это HTML -теги и модель это Структура документа . Чего-чего?.

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

Давайте погрузимся и узнаем.

Все скриншоты из Firefox 71.0 и его инструменты разработчика. Одной конкретной особенностью в Firefox 71.0, которая достойна упоминания, является Редактор кода многостроения в консоли.

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

Что такое Дом?
Будет ли браузер исправить некоторые ошибки в моем HTML?
Как я могу получить доступ к DOM?
Могу ли я получить доступ к DOM без инструментов разработчика браузера?
Как я могу найти элементы в DOM?
Как я могу манипулировать DOM?
Можно ли создать элемент в DOM?
Можно ли стиль элемента в DOM?
Могу ли я запросить DOM?

Давайте ответим на эти вопросы один за другим.

Что такое Дом?

С теоретической точки зрения, DOM – это языковой агностический интерфейс Это позволяет языку программирования манипулировать контентом, структурой и стилем любого веб -сайта.

Есть две фразы, которые могут быть размыты из последнего абзаца. Они есть:

Языковая агностик
манипулировать содержанием, структурой и стилем

Термин Язык агностик означает DOM создан, чтобы быть независимым от конкретного языка программирования . Этот пост будет сосредоточен на реализации JavaScript DOM. Реализация? Это потому, что у DOM есть свои собственные Технические характеристики Доступно онлайн для любой заинтересованной стороны.

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

От практического аспекта, Когда вы перемещаетесь или открываете веб -страницу в своем веб -браузере, веб -браузер анализирует HTML и CSS и создает представление документа Анкет Это представление известен как DOM Анкет JavaScript может получить доступ к этому представлению в форме Объекты Анкет Давайте посмотрим.

Document Object Model

This is an header

This is a paragraph text

Используйте «Осмотрите элемент» на Текст абзаца , Инструменты разработчика Придет и то, что вы видите под Инспектор Вкладка – это близкое представление Дом. Почему я сказал, что это близкое представление потому что Инструменты разработчика может содержать дополнительную информацию, такую как псевдо-элементы Анкет

Люди не идеальны, и вы можете неосознанно опустить некоторые теги в своем HTML. Что подводит нас к следующему вопросу.

[Вернемся к вопросам]

Будет ли браузер исправить некоторые ошибки в моем HTML?

Да. Во время Расположение Если браузер встречается со сформированным HTML, как пропущенные теги, браузер его исправят. Когда вы размещаете тег после закрытия Тег, браузер переместит тег перед закрытием ярлык.

Переключитесь на свой редактор и Удалить Закрытие

ярлык. Сохраните и обновите свой браузер. Вы заметите, что браузер добавил удаленное закрытие ярлык.

Когда вы проверяете источник страницы с Viewource Вы заметите ошибку.

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

Обновите свой HTML по Размещение абзаца после Закрытие тело ярлык.

Сохраните и обновите свой браузер.

Точно так же вы можете использовать Viewource проверить.

Это всего лишь два случая, Я призываю вас сломать ваш HTML , обновите браузер и обратите внимание на вывод в Инструменты разработчика и браузер посмотреть источник .

[Вернемся к вопросам]

Как я могу получить доступ к DOM?

Вам не нужен особый инструмент Чтобы получить доступ к Dom. Документ Object-это встроенный объект, который обладает свойствами и методами, которые мы можем использовать для доступа и изменения веб-сайтов.

Если вы используете Chrome, ваш вывод будет похож на изображение ниже.

[Вернемся к вопросам]

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

Да, ты можешь. Использование онлайн -инструмента под названием Live Dom Viewer по Ян Хиксон Анкет

Доступ к веб -сайту, связанному выше, копировать и вставить HTML в этом посте в первый текст ввода с надписью Разметка для тестирования и DOM View Раздел покажет DOM.

[Вернемся к вопросам]

Как я могу найти элементы в DOM?

Методы и свойства Документ используются для поиска элементов в DOM.

Для этого примера мы воспользуемся document.getElementsbytagname () метод Этот метод принимает тег HTML в качестве аргумента и возвращает Htmlcollection который содержит весь тег, который может найти метод.

Введите следующее в консоли:

// look for all 'p' tag
document.getElementsByTagName('p');

Выход:

Вы можете щелкнуть стрелку, чтобы увидеть более подробную информацию.

Другой метод – это Document.getElementById () Анкет Насколько я понимаю, название метода должно сообщить вам, как работает этот метод – он просто ищет ID Атрибут В вашем исходном коде HTML.

Измените свой код, добавив атрибут идентификатора в

ярлык.

Затем вы можете использовать следующий код, чтобы получить идентификатор:

/**
  * Type the code into the console
  */

// look for element with the header tag
document.getElementById('header');

[Вернемся к вопросам]

Как я могу манипулировать DOM?

Ранее я упоминал, что DOM похож на Живи структура данных. Это означает, что любые изменения в DOM отражаются немедленно.

/**
  * Type the code into the console
  */

document.body.style.backgroundColor = 'brown';

Вывод в консоли после нажатия клавиши ENTER:

[Вернемся к вопросам]

Можно ли создать элемент в DOM?

Да, ты можешь. document.createElement () используется для создания HTML -тега, который может быть добавлен в DOM. Он принимает HTML -тег в качестве аргумента.

Сначала обновите свой HTML, добавив ID Атрибут со значением тело Анкет

Это было бы:

Теперь посмотрите на следующий код, и, пожалуйста, прочитайте комментарии.

Сохраните свой HTML -файл и обновите свой браузер.

[Вернемся к вопросам]

Можно ли стиль элемента в DOM?

Конечно вы можете! Если тег HTML имеет стиль Атрибут Мы можем манипулировать этим с помощью JavaScript.

Обновите

тег, чтобы соответствовать следующему:

This is a paragraph text

Когда вы загружаете файл в браузер, цвет текста будет зеленым, а Font-Weight , смелый.

Время для некоторых манипуляций.

Удалить код внутри <Скрипт> Затем добавьте следующее:

/**
  * The method document.getElementsByTagName returns
  * an HTMLCollection. We grab the first paragraph
  * using the index number. If you are not familiar
  * with this syntax, please read the post on arrays
  * at https://dev.to/ziizium/javascript-arrays-50c5
  */

// grab the paragraph
let paragraph = document.getElementsByTagName('p')[0];

// change the color to red using the style attribute
paragraph.style.color = "red";

Сохраните и обновите свой браузер.

[Вернемся к вопросам]

Могу ли я запросить DOM?

Да, ты можешь. Queryselectorall () принимает строку селектора и возвращает Nodelist соответствующих элементов. Его двоюродный брат QuerySelector () принимает строку селектора и возвращает один соответствующий элемент.

Добавьте несколько абзацев в свой HTML с класс из Helloparagraph Анкет

Приведенный ниже код вернет весь абзац с классом Хеллопараграф . Вы можете ввести код в Консоль или в <Скрипт> Объедините в вашем HTML.

// get all paragraph with a class of helloParagraph
let helloPargraph = document.querySelectorAll('.helloPargraph');

// log the output
console.log(helloPargraph);

Вывод в браузере:

[Вернемся к вопросам]

Мы рассмотрели здесь немного земли, но есть другие вещи, которые вы можете сделать в DOM.

Они включают:

Динамическое добавление CSS
Манипулировать макетом страницы

Если вы хотите глубоко погрузиться во весь этот предмет, должен помочь следующий ресурс:

И здесь, на разработке:

Введение в манипуляции с DOM

Джон Au-Yeung ・ 2 января ’20 ・ 9 мин прочитал

Далее, Аякс.

Оригинал: “https://dev.to/ziizium/the-document-object-model-3n8o”

Что такое Дом?

This is an header

Будет ли браузер исправить некоторые ошибки в моем HTML?

Как я могу получить доступ к DOM?

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

Как я могу найти элементы в DOM?

Как я могу манипулировать DOM?

Можно ли создать элемент в DOM?

Можно ли стиль элемента в DOM?

Могу ли я запросить DOM?

Введение в манипуляции с DOM

Джон Au-Yeung ・ 2 января ’20 ・ 9 мин прочитал

Читайте ещё по теме: