01:05
Урок 11: Введение в DOM

Курс по программированию на JavaScript

Урок 11: Введение в DOM

DOM (Document Object Model) — это программный интерфейс для HTML и XML документов. Он представляет документ как дерево объектов, которые можно изменять с помощью JavaScript. В этом уроке мы рассмотрим, что такое DOM и как манипулировать элементами DOM.

Что такое DOM

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

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

Рассмотрим простой HTML документ:

<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
</head>
<body>
 <h1>Hello, World!</h1>
 <p>This is a paragraph.</p>
</body>
</html>

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

  • document
    • html
      • head
        • title
      • body
        • h1
        • p

Манипуляции с элементами DOM

JavaScript предоставляет множество методов для работы с DOM. Рассмотрим некоторые из них.

Доступ к элементам DOM

Для доступа к элементам DOM можно использовать методы getElementById, getElementsByClassName, getElementsByTagName и querySelector.

// Доступ к элементам DOM
let header = document.getElementById('header');
let paragraphs = document.getElementsByClassName('paragraph');
let divs = document.getElementsByTagName('div');
let firstParagraph = document.querySelector('p');
let allParagraphs = document.querySelectorAll('p');
// Элементы DOM доступны для манипуляций

Изменение содержимого элементов

Для изменения содержимого элементов DOM можно использовать свойства innerHTML и textContent.

// Изменение содержимого элементов
let header = document.getElementById('header');
header.innerHTML = 'Welcome to the DOM tutorial';

let paragraph = document.querySelector('p');
paragraph.textContent = 'This is an updated paragraph.';
// Содержимое элементов изменено

Изменение стилей элементов

Для изменения стилей элементов DOM можно использовать свойство style.

// Изменение стилей элементов
let header = document.getElementById('header');
header.style.color = 'blue';
header.style.fontSize = '24px';
// Стили элементов изменены

Добавление и удаление элементов

Для добавления новых элементов в DOM можно использовать методы createElement, appendChild и insertBefore. Для удаления элементов используется метод removeChild.

// Добавление и удаление элементов
let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';
document.body.appendChild(newParagraph);

let oldParagraph = document.querySelector('p');
document.body.removeChild(oldParagraph);
// Элементы добавлены и удалены

Упражнения

Упражнение 1: Изменение содержимого элемента

Создайте HTML документ с заголовком <h1 id="header">Hello, World!</h1> и абзацем <p>This is a paragraph.</p>. Используйте JavaScript для изменения текста заголовка на "Welcome to JavaScript" и текста абзаца на "This is an updated paragraph".

Решение:

// HTML
<h1 id="header">Hello, World!</h1>
<p>This is a paragraph.</p>

// JavaScript
let header = document.getElementById('header');
header.innerHTML = 'Welcome to JavaScript';

let paragraph = document.querySelector('p');
paragraph.textContent = 'This is an updated paragraph.';
// Текст элементов изменен

Объяснение: Мы использовали метод getElementById для доступа к заголовку и метод querySelector для доступа к абзацу. Затем изменили их текст с помощью свойств innerHTML и textContent.

Упражнение 2: Добавление нового элемента

Создайте HTML документ с контейнером <div id="container"></div>. Используйте JavaScript для добавления нового абзаца <p>This is a new paragraph</p> внутрь контейнера.

Решение:

// HTML
<div id="container"></div>

// JavaScript
let container = document.getElementById('container');
let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';
container.appendChild(newParagraph);
// Новый абзац добавлен в контейнер

Объяснение: Мы использовали метод getElementById для доступа к контейнеру, метод createElement для создания нового элемента p и метод appendChild для добавления нового абзаца в контейнер.

Категория: JavaScript | Просмотров: 12 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: