Работа с DOM

Автор: |
Нет комментариев

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

Что такое DOM

DOM расшифровывается как Document Object Model, что переводится как «Объектная модель документа». Это стандартизированный интерфейс для представления HTML-документа в виде дерева объектов, который позволяет программам и скриптам изменять структуру, стиль и содержимое веб-страницы динамически. В контексте браузера, DOM представляет собой иерархию узлов, каждый из которых соответствует элементу HTML-документа.

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

Пояснение     

Фраза «предоставляет API» означает, что определенная система или сервис предлагает набор инструментов и функций (интерфейсов), которые другие программы или приложения могут использовать для взаимодействия с этим сервисом. Например, когда говорится о том, что сайт предоставляет API, это значит, что разработчики могут подключаться к нему программно, запрашивать данные, отправлять команды и получать ответы от системы, не заходя непосредственно на сам сайт через браузер.

API (Application Programming Interface) – это своего рода «мостик» между двумя системами, позволяющий им обмениваться данными и командами.

Пример структуры DOM:

<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Привет!</h1>
    <p id="paragraph">Это пример простого параграфа.</p>
  </body>
</html>

В этом примере структура DOM будет выглядеть следующим образом:

  • document (корневой узел)
    • html
      • head
        • title: «Моя страница»
      • body
        • h1: «Привет!»
        • p#paragraph: «Это пример простого параграфа.»

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

Получение элементов страницы

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

document.getElementById()в

Этот метод возвращает первый элемент с указанным идентификатором (id). Идентификатор должен быть уникальным в пределах одной страницы.

const paragraph = document.getElementById('paragraph');
console.log(paragraph.textContent); // Выведет: "Это пример простого параграфа."

Фраза «элемент с указанным идентификатором (id)» относится к HTML-элементу, которому присвоен уникальный атрибут id. Этот атрибут используется для идентификации конкретного элемента на веб-странице. Уникальность id важна, так как в рамках одного документа не должно быть двух элементов с одинаковыми значениями id.

Например, если у вас есть такой HTML-код:

<div id="unique-element">Это уникальный элемент</div>
<p id="another-element">Еще один элемент</p>

Здесь у нас два элемента:
с id=»unique-element» и с id=»another-element». Эти идентификаторы уникальны в пределах данной страницы, и они помогают точно адресовать нужные элементы при работе с DOM через JavaScript или другие технологии.

document.querySelector() и document.querySelectorAll()

Эти методы позволяют находить элементы по CSS-селектору. querySelector() возвращает первый найденный элемент, соответствующий селектору, тогда как querySelectorAll() возвращает список всех подходящих элементов.

// Найти первый абзац на странице
const firstParagraph = document.querySelector('p');
console.log(firstParagraph.textContent);

// Найти все абзацы внутри элемента с классом 'content'
const allParagraphsInContent = document.querySelectorAll('.content p');
allParagraphsInContent.forEach(p => console.log(p.textContent));

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

Основные типы селекторов включают:
Универсальный селектор (*):
Выбирает все элементы на странице.

*{ margin: 0; padding: 0; }
Селектор по типу элемента (tag selector):
Выбирает все элементы определенного типа.

p { color: blue; }
Селектор по классу (.class):
Выбирает все элементы с определенным классом.

.important { font-weight: bold; }
Селектор по идентификатору (#id):
Выбирает элемент с уникальным идентификатором.

#header { background-color: red; }

Атрибутные селекторы:
Позволяют выбирать элементы на основе значений их атрибутов.
input[type=»submit»] { border-radius: 10px; }

Псевдоклассы и псевдоэлементы:
Используются для выбора элементов в зависимости от их состояния или положения.
a:hover { text-decoration: underline; }
::before { content: «Прочитайте: «; }

Комбинаторы:
Объединяют несколько селекторов для создания сложных условий выбора.
div > p { line-height: 1.5; }
ul + p { margin-top: 20px; }

В контексте JavaScript селекторы часто используются методами вроде querySelector() и querySelectorAll(), где можно передавать CSS-селекторы для нахождения соответствующих элементов на странице.

// Найдем первый элемент с классом "important"
const importantElement = document.querySelector('.important');
				
// Найдем все элементы списка
const listItems = document.querySelectorAll('ul li');

Таким образом, селекторы являются мощным инструментом для управления стилями и поведением элементов на веб-страницах.

document.getElementsByClassName()

Возвращает коллекцию всех элементов с заданным именем класса.

const elementsWithClassExample = document.getElementsByClassName('example');
for (let i = 0; i < elementsWithClassExample.length; i++) {
  console.log(elementsWithClassExample[i].innerHTML);
}

document.getElementsByTagName()

Возвращает коллекцию всех элементов с заданным тегом.

const allHeadings = document.getElementsByTagName('h1');
for (let i = 0; i < allHeadings.length; i++) {
  console.log(allHeadings[i].innerText);
}

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

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

Изменение текста

Для изменения текста элемента используются следующие свойства:

textContent: изменяет текстовый контент элемента без учета HTML-разметки.

innerHTML: изменяет весь внутренний HTML-код элемента.

// Изменить текст первого параграфа
firstParagraph.textContent = 'Новый текст';

// Добавить HTML-тег внутрь второго параграфа
secondParagraph.innerHTML += '<strong>Жирный текст</strong>';

Изменение стилей

Стили элемента можно изменить через свойство style. Оно позволяет задать любые CSS-стили для элемента.

// Изменить цвет фона и размер шрифта
firstParagraph.style.backgroundColor = 'lightblue';
firstParagraph.style.fontSize = '20px';

// Можно использовать camelCase для свойств с дефисом
secondParagraph.style.borderBottom = '1px solid black';

Также можно добавить или удалить классы у элемента, используя методы classList.

// Добавление класса
firstParagraph.classList.add('highlighted');

// Удаление класса
firstParagraph.classList.remove('highlighted');

// Проверка наличия класса
if (firstParagraph.classList.contains('highlighted')) {
  console.log('Класс присутствует!');
}

Создание новых элементов

Можно создавать новые элементы и вставлять их в документ.

// Создать новый абзац
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Это новый параграф.';

// Вставить новый параграф после первого
firstParagraph.after(newParagraph);

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

Вот общий шаблон HTML-документа, куда можно вставлять примеры:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название вашего проекта</title>
</head>
<body>
  <!-- Здесь размещаете ваш HTML-код -->

  <script>
    // Здесь размещаете ваш JavaScript-код
  </script>
</body>
</html>

Заполнив соответствующие секции нужным контентом, вы сможете наблюдать работу ваших скриптов в браузере.

Пример 1: Динамическое добавление контента

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Динамическое добавление контента</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }	
    .output {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Введите текст:</h1>
  <input type="text" id="inputField" placeholder="Ваш текст...">
  <button onclick="addText()">Добавить</button>
  
  <div class="output" id="output"></div>

  <script>
    function addText() {
      const inputValue = document.getElementById("inputField").value;
      
      if (inputValue.trim()) {
        const outputDiv = document.getElementById("output");
        
        // Создаем новый параграф
        const newP = document.createElement("p");
        newP.textContent = inputValue;
        
        // Добавляем созданный параграф в div
        outputDiv.appendChild(newP);
        
        // Очищаем поле ввода
        document.getElementById("inputField").value = "";
      }
    }
  </script>
</body>
</html>

Как работает:

  1. Пользователь вводит текст в поле ввода.
  2. При нажатии кнопки «Добавить» вызывается функция addText().
  3. Функция получает значение поля ввода и создает новый элемент , содержащий введенный текст.
  4. Новый параграф добавляется в контейнер с классом output.
  5. Поле ввода очищается, готовое к новому вводу.

Пример 2: Обновление стилей элементов

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Обновление стилей элементов</title>
  <style>	
    body {
      font-family: Arial, sans-serif;
    }
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgray;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Изменение цвета блока</h1>
  <div class="box" id="colorBox"></div>
  <button onclick="changeColor()">Изменить цвет</button>

  <script>
    function changeColor() {
      const box = document.getElementById("colorBox");
      
      // Массив цветов для случайного выбора
      const colors = ["red", "green", "blue", "yellow"];
      
      // Случайный выбор цвета
      const randomIndex = Math.floor(Math.random() * colors.length);
      const newColor = colors[randomIndex];
      
      // Применяем выбранный цвет к блоку
      box.style.backgroundColor = newColor;
    }
  </script>
</body>
</html>

Как работает:

  1. На странице отображается серый блок и кнопка.
  2. При нажатии на кнопку вызывается функция changeColor().
  3. Функция выбирает случайный цвет из массива и присваивает его фоновому цвету блока.

Пример 3: Реакция на события

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Реакция на события</title>
  <style>
    body {	
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Кнопка с реакцией на клик</h1>
  <button id="clickButton">Нажмите меня!</button>

  <script>
    const button = document.getElementById("clickButton");
    
    button.addEventListener("click", () => {
      button.textContent = "Вы нажали!";
    });
  </script>
</body>
</html>

Как работает:

  1. На странице находится кнопка с текстом «Нажмите меня!».
  2. Когда пользователь нажимает на кнопку, срабатывает обработчик события click.
  3. Внутри обработчика текст кнопки изменяется на «Вы нажали!».

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *