Posted inКурс по JavaScript Модуль 7. Основы обработки событий Разработка Языки программирования

Курс по JavaScript для начинающих: Модуль 7. Основы обработки событий. Урок 2. Основные методы работы с DOM

9 июля, 2024No Comments
Курс по JavaScript для начинающих: Модуль 7. Основы обработки событий. Урок 2. Основные методы работы с DOM

Введение

Document Object Model (DOM) представляет собой интерфейс для доступа и управления структурой HTML-документов. Работа с DOM позволяет динамически изменять содержимое веб-страниц, добавлять новые элементы, изменять стили и выполнять другие действия. В этом уроке мы рассмотрим два основных метода работы с DOM: document.getElementById и document.querySelector.

Что такое DOM

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Пример документа</title>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Это абзац.</p>
</body>
</html>

Метод document.getElementById

Описание

Метод document.getElementById возвращает элемент, который имеет атрибут id с указанным значением. Это один из наиболее часто используемых методов для доступа к элементам DOM.

Синтаксис

document.getElementById(id);

Пример использования

HTML:

<div id="content">Привет, мир!</div>

JavaScript:

let content = document.getElementById("content");
console.log(content.textContent); // Привет, мир!

Применение

Метод document.getElementById полезен для быстрого доступа к элементам, которым присвоены уникальные идентификаторы (id). Он возвращает первый элемент с заданным id или null, если элемент не найден.

Метод document.querySelector

Описание

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

Синтаксис

document.querySelector(selector);

Пример использования

HTML:

<div class="content">Привет, мир!</div>
<p class="content">Другой элемент с классом content.</p>

JavaScript:

let firstContent = document.querySelector(".content");
console.log(firstContent.textContent); // Привет, мир!

Применение

Метод document.querySelector полезен для доступа к элементам с использованием CSS-селекторов. Он возвращает первый элемент, соответствующий селектору, или null, если элемент не найден.

Сравнение методов getElementById и querySelector

Преимущества getElementById

  • Быстрее работает, так как ищет элемент по уникальному идентификатору.
  • Четко указывает на конкретный элемент.

Преимущества querySelector

  • Позволяет использовать мощные и гибкие CSS-селекторы.
  • Может находить элементы по классам, атрибутам и другим селекторам, что делает его более универсальным.

Пример использования обоих методов

HTML:

<div id="mainContent" class="content">Основной контент</div>

JavaScript:

let mainContentById = document.getElementById("mainContent");
let mainContentByQuery = document.querySelector("#mainContent");

console.log(mainContentById.textContent); // Основной контент
console.log(mainContentByQuery.textContent); // Основной контент

Заключение

Методы document.getElementById и document.querySelector предоставляют эффективные способы доступа к элементам DOM. Понимание их различий и умение выбирать подходящий метод в зависимости от задачи позволяет создавать более гибкие и динамичные веб-страницы.

Контрольные вопросы

Что такое DOM в контексте веб-разработки?

  • Программный интерфейс для HTML и XML документов, представляющий документ в виде дерева объектов.
  • База данных для хранения веб-страниц.
  • Метод для доступа к элементам HTML.
  • Язык программирования для веб-разработки.

Какой метод возвращает элемент с указанным id?

  • document.querySelector
  • document.getElementById
  • document.getElementsByClassName
  • document.getElementsByTagName

Какой метод возвращает первый элемент, соответствующий указанному CSS-селектору?

  • document.getElementById
  • document.getElementsByClassName
  • document.querySelector
  • document.getElementsByTagName

Как получить элемент с id “header” с использованием метода getElementById?

  • document.querySelector("#header")
  • document.getElementById("header")
  • document.getElementsByClassName("header")
  • document.getElementsByTagName("header")

Что возвращает метод document.querySelector?

  • Массив всех элементов, соответствующих селектору.
  • Первый элемент, соответствующий указанному CSS-селектору.*
  • Элемент с указанным id.
  • Коллекцию всех элементов с указанным тегом.

Какой метод используется для нахождения элемента по классу “content”?

  • document.getElementById("content")
  • document.querySelector(".content")
  • document.querySelector("#content")
  • document.getElementsByTagName("content")

Упражнения

Упражнение 1: Доступ к элементу по id

Создайте HTML-элемент с id «header» и используйте метод document.getElementById для получения этого элемента и изменения его текста.

HTML:

<h1 id="header">Hello World</h1>

JavaScript:

let header = document.getElementById("header");
header.textContent = "Welcome to JavaScript!";
console.log(header.textContent); // Welcome to JavaScript!

Упражнение 2: Доступ к элементу по классу с querySelector

Создайте HTML-элемент с классом «intro» и используйте метод document.querySelector для получения этого элемента и изменения его текста.

HTML:

<p class="intro">This is an introduction.</p>

JavaScript:

let intro = document.querySelector(".intro");
intro.textContent = "Introduction updated.";
console.log(intro.textContent); // Introduction updated.

Упражнение 3: Изменение стиля элемента с getElementById

Создайте HTML-элемент с id «box» и используйте метод document.getElementById для изменения его стиля (например, фонового цвета).

HTML:

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

JavaScript:

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
console.log(box.style.backgroundColor); // blue

Упражнение 4: Доступ к элементу по атрибуту с querySelector

Создайте HTML-элемент с атрибутом data-role="user" и используйте метод document.querySelector для получения этого элемента и изменения его текста.

HTML:

<div data-role="user">User information</div>

JavaScript:

let user = document.querySelector('[data-role="user"]');
user.textContent = "User details updated.";
console.log(user.textContent); // User details updated.

Упражнение 5: Доступ к элементу по тегу с querySelector

Создайте HTML-элемент <footer> и используйте метод document.querySelector для получения этого элемента и изменения его текста.

HTML:

<footer>Footer content</footer>

JavaScript:

let footer = document.querySelector("footer");
footer.textContent = "Footer content updated.";
console.log(footer.textContent); // Footer content updated.

Упражнение 6: Доступ к элементу по псевдоклассу с querySelector

Создайте HTML-список и используйте метод document.querySelector для получения первого элемента списка и изменения его текста.

HTML:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

JavaScript:

let firstItem = document.querySelector("ul li:first-child");
firstItem.textContent = "First item updated.";
console.log(firstItem.textContent); // First item updated.

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

Создайте HTML-элемент <div> с id «container» и используйте JavaScript для добавления нового параграфа внутри этого контейнера.

HTML:

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

JavaScript:

let container = document.getElementById("container");
let newParagraph = document.createElement("p");
newParagraph.textContent = "New paragraph added.";
container.appendChild(newParagraph);
console.log(container.innerHTML); // <p>New paragraph added.</p>

Упражнение 8: Удаление элемента из DOM

Создайте HTML-элемент с id «removeMe» и используйте JavaScript для его удаления из DOM.

HTML:

<div id="removeMe">This element will be removed.</div>

JavaScript:

let removeMe = document.getElementById("removeMe");
removeMe.parentNode.removeChild(removeMe);
console.log(document.getElementById("removeMe")); // null

Упражнение 9: Изменение атрибутов элемента с querySelector

Создайте HTML-элемент <img> с атрибутом src и используйте метод document.querySelector для изменения значения атрибута src.

HTML:

<img id="myImage" src="oldImage.jpg" alt="Old Image">

JavaScript:

let image = document.querySelector("#myImage");
image.src = "newImage.jpg";
console.log(image.src); // newImage.jpg

Упражнение 10: Переключение класса элемента с querySelector

Создайте HTML-элемент с id «toggleClass» и используйте метод document.querySelector для добавления или удаления класса «active» при клике на элемент.

HTML:

<div id="toggleClass">Click to toggle class</div>

JavaScript:

let toggleClassElement = document.querySelector("#toggleClass");
toggleClassElement.onclick = function() {
    this.classList.toggle("active");
};
Last updated on 9 июля, 2024
Оставить комментарий

Комментарии

CommentsEmpty

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

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