JavaScript - DOM Document: A Beginner's Guide

Привет,野心勃勃的程序设计师们! Сегодня мы отправимся в увлекательное путешествие в мир JavaScript и Document Object Model (DOM). Не волнуйтесь, если эти термины показались вам немного пугающими - к концу этого руководства вы будете манипулировать веб-страницами, как профи!

JavaScript - DOM Document

Что такое HTML DOM Document?

Представьте, что вы строите дом. Чертежи этого дома - это ваш HTML-документ, а сам дом - это то, что вы видите в браузере. А что, если вы хотите изменить цвет стены или добавить новое окно после того, как дом уже построен? Вот где на помощь приходит DOM!

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

Документный объект

В корне этого дерева находится объект document. Это как фундамент нашего дома - все остальное построено поверх него.

Давайте начнем с простого примера:

<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница DOM</title>
</head>
<body>
<h1>Добро пожаловать в DOM!</h1>
<p>Это абзац.</p>
</body>
</html>

В этой структуре HTML, document находится наверху, затем follows html, затем head и body, и так далее.

Доступ к объекту DOM Document

Теперь, когда мы понимаем, что такое DOM, давайте узнаем, как к нему получить доступ. В JavaScript мы можем легко получить доступ к объекту документа, используя ключевое слово document.

Вот простой пример:

console.log(document);

Если вы выполните это в консоли вашего браузера, вы увидите весь объект документа. Это как получить вид на наш дом с высоты птичьего полета!

Свойства объекта DOM Document

Объект документа имеет множество свойств, которые позволяют нам доступ к различным частям HTML-документа. Давайте рассмотрим некоторые из этих свойств:

Свойство Document childElementCount

Свойство childElementCount возвращает количество дочерних элементов, которые имеет элемент. Для объекта документа оно возвращает количество прямых детей элемента <html>.

console.log(document.childElementCount);

Это обычно возвращает 1, так как элемент <html> обычно имеет только одного прямого ребенка: элемент <body>.

Свойство Document Links

Свойство links возвращает коллекцию всех элементов <a> и <area> в документе, у которых есть атрибут href.

console.log(document.links);

Это как спросить: "Сколько дверей (ссылок) у нашего дома?"

Свойство Document Title

Свойство title получает или устанавливает заголовок текущего документа.

console.log(document.title);
document.title = "Мое новое имя";

Это как изменить табличку с именем на вашем доме!

Практические примеры

Давайте применяем наши знания на реальных примерах:

Пример 1: Изменение заголовка страницы

document.title = "Добро пожаловать на " + document.title;
console.log("Новый заголовок: " + document.title);

Этот скрипт добавляет "Добро пожаловать на " в начале текущего заголовка страницы. Это как добавить friendly greeting к табличке с именем вашего дома!

Пример 2: Подсчет ссылок

let linkCount = document.links.length;
console.log("Эта страница имеет " + linkCount + " ссылок.");

Этот скрипт подсчитывает, сколько ссылок на вашей странице. Это как сосчитать, сколько способов покинуть ваш дом!

Пример 3: Изменение содержимого страницы

let newHeading = document.createElement("h2");
newHeading.textContent = "Этот заголовок был добавлен с помощью JavaScript!";
document.body.appendChild(newHeading);

Этот скрипт создает новый элемент <h2>, устанавливает его текстовое содержимое и добавляет его в конец <body>. Это как добавить новую комнату к вашему дому с помощью JavaScript!

Общие методы объекта DOM Document

Вот таблица некоторых общих методов объекта DOM:

Метод	Описание
`document.getElementById(id)`	Возвращает элемент с указанным идентификатором
`document.getElementsByClassName(name)`	Возвращает коллекцию элементов с указанным именем класса
`document.getElementsByTagName(name)`	Возвращает коллекцию элементов с указанным именем тега
`document.createElement(name)`	Создает элементный узел
`document.createTextNode(text)`	Создает текстовый узел
`document.querySelector(selector)`	Возвращает первый элемент, соответствующий CSS-селектору
`document.querySelectorAll(selector)`	Возвращает все элементы, соответствующие CSS-селектору

Заключение

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

Продолжая ваше путешествие, вы откроете для себя еще больше захватывающих способов использования DOM. Продолжайте практиковаться, stay curious и не бойтесь экспериментировать. Before you know it, вы будете создавать веб-страницы, которые танцуют под вашу JavaScript музыку!

Счастливого кодирования, будущие веб-волшебники!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Методы DOM

Следующий учебник:

JavaScript - Элементы DOM