Введение:

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

Что такое DOM?

Во-первых, нам нужно знать, что такое DOM.

DOM означает:

D окумент

O bject

M odel

Это программный интерфейс для документов HTML и XML. Он определяет логическую структуру документов и способы доступа к документу и управления им. Структура DOM похожа на структуру перевернутого дерева с «документом» наверху. Древовидная структура «DOM» представляет собой HTML-код веб-сайта, и каждый элемент HTML считается узлом.

Настройка <script>:

Есть много способов манипулировать DOM, но на самом деле первым шагом является настройка тега скрипта. Тег скрипта должен быть помещен в файл index.html (очень похоже на настройку таблицы стилей CSS). Тег скрипта должен быть размещен прямо над закрывающим тегом основного текста. Вот пример этого:

Альтернативой может быть размещение тега <script> внутри тега <head> и размещение атрибута defer между словами script и type:

Атрибут defer указывает браузеру не ждать скрипта. Вместо этого браузер продолжит обработку HTML, построение DOM. Сценарий загружается «в фоновом режиме», а затем запускается, когда DOM полностью построена. Какой бы способ записи тега сценария вы ни выбрали, подойдет и то, и другое.

Доступ к элементам внутри DOM:

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

  • document.getElementById() ➞ с помощью этого метода можно найти отдельный элемент по его идентификатору
  • document.getElementsByClassname() ➞ возвращает коллекцию HTML, которая содержит каждый дочерний элемент с указанным именем класса.
  • document.getElementsByTagName() ➞ аналогично getElementByClassname(), этот метод возвращает коллекцию HTML, которая включает каждого потомка с определенным тегом HTML.
  • document.querySelectorAll() ➞ возвращает список узлов, представляющий элементы документа, соответствующие указанной группе селекторов.
  • document.querySelector() ➞ Это мой любимый способ доступа к конкретному узлу, потому что вы можете получить доступ буквально ко всему в DOM, будь то с идентификатором или тегом.

Создание элементов и управление ими:

Создать ➞Мы можем создать элемент, используя document.createElement(“selector”):

После создания элемента мы можем либо добавить в него что-нибудь, либо обновить с помощью _13 _, _ 14_ или textContent. Для получения дополнительной информации о том, как использовать любой из трех, обратитесь к разделу ресурсов внизу этого блога!

Добавление в DOM:

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

  • parentNode.appendChild()
  • parentNode.append()

В любом случае это нормально, мне лично нравится использовать .append(), потому что его легче запомнить.

Вывод:

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

Ресурсы: