«Что такое ДОМ?» это был вопрос, который я задал себе при первом знакомстве с этой технологией, и у меня не было никакого представления или опыта в этой теме. В своем первом проекте, использующем DOM, я сильно охренел, но чем полезна объектная модель документа вместе с JavaScript, и как мы можем ее быстро и легко освоить? Я постараюсь провести вас по этой теме максимально кратко, но при этом максимально понятно.

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

«Объектная модель документа (DOM) — это программный API для документов HTML и XML. Он определяет логическую структуру документов и способ доступа к документу и управления им.”~Джонатан Роби, Texcel Research.

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

Так чем же полезен DOM вместе с JavaScript?

Как я уже говорил, DOM позволяет нам получать доступ к элементам HTML-документа, но как DOM может получить к ним доступ?

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

Например, если мы хотим получить доступ к HTML-элементу div с атрибутом ID «контейнер» (‹div id="container"›‹/div›), мы можем получить к нему доступ, введя элемент JavaScript:

const div = document.getElementById('контейнер');

И вот здесь в игру вступает JavaScript. Мы можем заставить другой элемент появиться внутри этого элемента, создав другой элемент:

const h1 = document.createElement('h1');

И затем добавление:

div.appendChild(h1);

Это приведет к тому, что элемент h1 появится внутри элемента div.

Да! Обработка JAvaScript DOM так же проста. Используя синтаксис, который мы использовали выше, JavaScript может получить доступ к этому элементу, сохранить его в переменной и начать воспроизводить и манипулировать этим элементом с множеством возможностей, используя различные доступные методы JavaScript: вы даже можете изменить таблицу стилей! Как я уже сказал, существует множество других возможностей, и это то, что профессиональные интерфейсные разработчики используют каждый день с различными существующими платформами.

(Вы можете найти основные методы JavaScript в https://devdocs.io/)

Как мы можем узнать о манипулировании DOM в JavaScript?

В Интернете есть много документации по этой теме, даже на YouTube, но я собираюсь показать вам страницы, которые я использовал, чтобы изучить небольшое количество вещей, которые я изучил самостоятельно. Первый и самый важный навык, которым вы должны обладать, — это самообучение: это самый важный навык, который нужен разработчикам, потому что вы не всегда найдете кого-то, кто терпеливо и просто объяснит вам каждую мелочь. Большую часть времени вам придется искать много информации и впитывать то, что может быть вам полезно, а затем пытаться собрать все это воедино и понять, что у вас есть.

Зная это, давайте начнем с лучшего источника информации во всем мире - › Google! Google всегда будет вашим лучшим другом. Какой бы вопрос у вас ни возник, попробуйте найти его в Google. Затем у нас есть Stack Overflow: здесь вы можете задавать вопросы, но самое главное, что у многих людей может быть такая же проблема, с которой вы сталкиваетесь, поэтому там уже могут быть ответы на ваши вопросы. Эти два источника являются наиболее важными для разработчика, и теперь давайте продолжим с наиболее важными для этой статьи:

Первые (потому что их два) должны быть https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction и https://www.w3schools.com/js/js_htmldom.asp.. Эти две страницы помогли мне и продолжают помогать мне почти со всеми основными проблемами, которые я приходилось сталкиваться, когда я знал что-либо об этой теме. Хорошей практикой является попытаться прочитать документацию, прежде чем пытаться что-то с ней сделать, но более важно выполнять шаги самостоятельно, потому что лучший способ учиться — это создавать что-то.

Второй источник — https://devdocs.io/. На этой странице содержится информация не только о DOM, но и о событиях DOM, методах JavaScript, HTML, CSS. , и HTTP, так что это полное руководство, которое проведет вас через интерфейсное обучение.

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

Усердно работайте над достижением цели, которую вы поставили перед собой, когда начинали эту карьеру!