🌳 Практическая работа №2

DOM-дерево: изучаем структуру веб-страницы и учимся управлять элементами

📚 Содержание инструкции: 🎯 Задание 📖 Что такое DOM? 🧩 Задание 1. Дочерние элементы DOM 🎲 Задание 2. Выделение ячеек по диагонали 🔍 Задание 3. Использование getElementById ⭐ Задание 4. Светофор (продолжение) 🔎 Задание 5. Исследователь страницы (продолжение) 📚 Шпаргалка по DOM

🎯 Задание

Познакомиться с DOM-деревом и научиться:

🔍 находить элементы на странице с помощью JavaScript;
🎨 получать доступ к дочерним элементам;
📝 использовать document.getElementById и навигацию по DOM;
🎮 создавать интерактивные элементы (светофор);
🔎 исследовать DOM реальных сайтов.

📖 Часть 1. Что такое DOM?

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

🔍 Как посмотреть DOM: Нажми F12 → вкладка Elements. Там видно всё дерево страницы. Можно сворачивать/разворачивать теги и смотреть стили.

🌱 Пример DOM-дерева

Для такого HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title>О лосях</title>
</head>
<body>
    Правда о лосях.
</body>
</html>

DOM-дерево будет выглядеть так:

html
├── head
│   └── title
│       └── "О лосях"
└── body
    └── "Правда о лосях."

💡 Важно знать:

Узлы-элементы — HTML-теги, основные строительные блоки.
Текстовые узлы — содержат текст (обозначаются как #text).
Комментарии — тоже являются узлами DOM.
Пробелы и переводы строк — тоже текстовые узлы!
Существует 12 типов узлов, но на практике мы работаем с 4: document, элементы, текстовые узлы, комментарии.

🧩 Задание 1. Дочерние элементы DOM

Для страницы с таким кодом напиши JavaScript, который получит доступ к указанным элементам.

<html>
<body>
    <div>Пользователи:</div>
    <ul>
        <li>Джон</li>
        <li>Пит</li>
    </ul>
</body>
</html>

✏️ Твоя задача:

Найти элемент <div>.
Найти элемент <ul>.
Найти второй <li> (с именем Пит).

Напиши код в консоли браузера или в теге <script>.

📖 Что нужно знать для решения:
• document.body — это объект, который представляет тег <body>.
• firstElementChild — первый дочерний элемент (тег внутри).
• lastElementChild — последний дочерний элемент.
• children[0] — тоже первый дочерний элемент (индексация с 0).
• Элементы на одном уровне называются "соседями" (siblings).

💡 Подсказки шаг за шагом:

1. Чтобы найти <div> — посмотри, какой элемент в <body> первый. Это document.body.firstElementChild.
2. Чтобы найти <ul> — это последний элемент внутри <body>: document.body.lastElementChild.
3. Чтобы найти второй <li> — сначала найди <ul>, затем возьми его последнего ребёнка: document.body.lastElementChild.lastElementChild.

🔑 Посмотреть решение (только если совсем не получается)

// DOM-узел элемента <div>:
document.body.firstElementChild
// или
document.body.children[0]

// DOM-узел элемента <ul>:
document.body.lastElementChild
// или
document.body.children[1]

// Второй <li> (с именем Пит):
document.body.lastElementChild.lastElementChild

🎲 Задание 2. Выделение ячеек по диагонали

Напиши код, который выделит красным цветом все ячейки в таблице по диагонали.

✏️ Твоя задача:

Скопируй этот код в файл diagonal.html и открой в браузере. Затем напиши функцию highlightDiagonal(), которая выделит ячейки на главной диагонали.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }
        td {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            font-size: 18px;
            transition: 0.3s;
        }
        .diagonal {
            background-color: red !important;
            color: white;
        }
        button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background: #feca57;
            border: none;
            border-radius: 10px;
        }
        .reset-btn {
            background: #3498db;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h3>🎲 Выдели диагональ</h3>
    <table id="myTable">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
        <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
        <tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
        <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
    </table>
    <button onclick="highlightDiagonal()">🔴 Выделить диагональ</button>
    <button onclick="resetTable()" class="reset-btn">🔄 Сбросить</button>
    
    <script>
        function highlightDiagonal() {
            // НАПИШИ КОД ЗДЕСЬ
        }
        
        function resetTable() {
            // НАПИШИ КОД ЗДЕСЬ (очистить выделение)
        }
    </script>
</body>
</html>

📖 Что нужно знать для решения:
• document.getElementById('myTable') — получает таблицу по её id.
• table.rows — это коллекция (массивоподобный объект) всех строк таблицы.
• table.rows[0] — первая строка, table.rows[1] — вторая и так далее.
• row.cells — коллекция ячеек в строке.
• row.cells[0] — первая ячейка, row.cells[1] — вторая.
• На главной диагонали у первой строки — первая ячейка (индекс 0), у второй строки — вторая ячейка (индекс 1) и так далее.
• То есть формула: table.rows[i].cells[i] — это ячейка на диагонали.

💡 Подсказки шаг за шагом:

1. Сначала получи таблицу: const table = document.getElementById('myTable');.
2. Нужно пройти по всем строкам. Используй цикл for (let i = 0; i < table.rows.length; i++).
3. Внутри цикла получи ячейку на диагонали: table.rows[i].cells[i].
4. Добавь этой ячейке класс "diagonal": ...classList.add('diagonal').
5. Для сброса — пройди по всем строкам и всем ячейкам и удали класс "diagonal".

🔑 Посмотреть решение (только если совсем не получается)

function highlightDiagonal() {
    const table = document.getElementById('myTable');
    for (let i = 0; i < table.rows.length; i++) {
        table.rows[i].cells[i].classList.add('diagonal');
    }
}

function resetTable() {
    const table = document.getElementById('myTable');
    for (let i = 0; i < table.rows.length; i++) {
        for (let j = 0; j < table.rows[i].cells.length; j++) {
            table.rows[i].cells[j].classList.remove('diagonal');
        }
    }
}

🔍 Задание 3. Использование getElementById

Если у элемента есть атрибут id, мы можем получить его вызовом document.getElementById(id), где бы он ни находился.

✏️ Твоя задача:

Создай страницу byid.html с таким кодом и допиши JavaScript:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 30px;
            background: #1a1a2e;
            color: white;
        }
        button {
            background: #feca57;
            color: #1a1a2e;
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1 id="title">Привет!</h1>
    <p id="text">Какой-то текст</p>
    <button id="myButton">Нажми меня</button>
    <button onclick="changeStyles()">Изменить стили</button>
    
    <script>
        function changeStyles() {
            // НАПИШИ КОД ЗДЕСЬ
            // 1. Измени цвет заголовка на синий
            // 2. Измени размер шрифта параграфа на 20px
            // 3. Измени фон кнопки на зелёный
        }
    </script>
</body>
</html>

📖 Что нужно знать для решения:
• document.getElementById('id_элемента') — находит элемент по id.
• У найденного элемента можно менять стили через свойство style.
• element.style.color = 'blue' — меняет цвет текста.
• element.style.fontSize = '20px' — меняет размер шрифта.
• element.style.background = 'green' — меняет цвет фона.
• Названия свойств в JavaScript пишутся слитно, без дефисов: font-size → fontSize.

💡 Подсказки шаг за шагом:

1. Найди заголовок: document.getElementById('title') и измени его цвет.
2. Найди параграф: document.getElementById('text') и измени размер шрифта.
3. Найди кнопку: document.getElementById('myButton') и измени её фон.

🔑 Посмотреть решение (только если совсем не получается)

function changeStyles() {
    document.getElementById('title').style.color = 'blue';
    document.getElementById('text').style.fontSize = '20px';
    document.getElementById('myButton').style.background = 'green';
}

⭐ Задание 4. Светофор

Теперь, когда ты умеешь находить элементы и менять их классы, создадим интерактивный светофор.

✏️ Твоя задача:

Скопируй этот код в файл traffic.html. Нужно дописать JavaScript, чтобы при нажатии на кнопку цвета переключались в правильном порядке.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 30px;
            background: #1a1a2e;
            color: white;
        }
        .traffic-light {
            background: #2c3e50;
            width: 120px;
            padding: 20px;
            border-radius: 30px;
            margin: 20px auto;
        }
        .light {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 10px auto;
            opacity: 0.3;
            transition: 0.3s;
        }
        .red { background: #e74c3c; }
        .yellow { background: #f1c40f; }
        .green { background: #2ecc71; }
        .active {
            opacity: 1;
            box-shadow: 0 0 20px currentColor;
        }
        button {
            background: #feca57;
            color: #1a1a2e;
            padding: 12px 24px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
        }
        .info {
            margin-top: 20px;
            font-size: 14px;
            color: #aaa;
        }
    </style>
</head>
<body>
    <h1>🚦 Светофор</h1>
    <div class="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
    <button id="nextLight">➡️ Следующий</button>
    <div class="info">Порядок: Красный → Красный+Жёлтый → Зелёный → Жёлтый → Красный...</div>
    
    <script>
        // ШАГ 1: Найди все лампочки с помощью querySelectorAll
        // const lights = ...
        
        // ШАГ 2: Создай массив состояний
        // Каждое состояние — это массив из трёх чисел (1 = включено, 0 = выключено)
        // Порядок: [Красный, Жёлтый, Зелёный]
        // const states = [
        //     [1, 0, 0],  // состояние 0: только красный
        //     [1, 1, 0],  // состояние 1: красный + жёлтый
        //     [0, 0, 1],  // состояние 2: только зелёный
        //     [0, 1, 0]   // состояние 3: только жёлтый
        // ];
        
        // ШАГ 3: Создай переменную для текущего состояния (начинаем с 0)
        // let currentState = 0;
        
        // ШАГ 4: Напиши функцию updateLights()
        // Она должна:
        // - пройти по всем лампочкам (цикл for)
        // - если в текущем состоянии на позиции i стоит 1 — добавить класс "active"
        // - если 0 — удалить класс "active"
        // - затем перейти к следующему состоянию (currentState = (currentState + 1) % states.length)
        
        // ШАГ 5: Вызови updateLights() один раз, чтобы зажечь красный
        
        // ШАГ 6: Добавь обработчик нажатия на кнопку, который вызывает updateLights()
    </script>
</body>
</html>

📖 Что нужно знать для решения:
• document.querySelectorAll('.light') — находит ВСЕ элементы с классом "light".
• Результат — коллекция (как массив), где lights[0] — красный, lights[1] — жёлтый, lights[2] — зелёный.
• element.classList.add('active') — добавляет класс.
• element.classList.remove('active') — удаляет класс.
• % (оператор остатка) — помогает зациклить состояния: (0→1→2→3→0→1...).

💡 Подсказки шаг за шагом:

1. const lights = document.querySelectorAll('.light'); — получаем все лампочки.
2. Создаём массив states с 4 состояниями (как указано в комментариях).
3. let currentState = 0; — начинаем с красного.
4. В функции updateLights() используем цикл for (let i = 0; i < lights.length; i++).
5. Внутри цикла проверяем: если states[currentState][i] === 1, то добавляем класс "active", иначе удаляем.
6. После цикла: currentState = (currentState + 1) % states.length; — переходим к следующему состоянию.
7. В конце кода: updateLights(); и document.getElementById('nextLight').onclick = updateLights;.

🔑 Посмотреть решение (только если совсем не получается)

const lights = document.querySelectorAll('.light');
const states = [
    [1, 0, 0],  // красный
    [1, 1, 0],  // красный + жёлтый
    [0, 0, 1],  // зелёный
    [0, 1, 0]   // жёлтый
];
let currentState = 0;

function updateLights() {
    for (let i = 0; i < lights.length; i++) {
        if (states[currentState][i] === 1) {
            lights[i].classList.add('active');
        } else {
            lights[i].classList.remove('active');
        }
    }
    currentState = (currentState + 1) % states.length;
}

updateLights();
document.getElementById('nextLight').onclick = updateLights;

🔎 Задание 5. Исследователь страницы

Теперь, когда ты знаешь, как находить элементы, попробуй применить эти знания на реальных сайтах!

📝 Что нужно сделать:

1. Открой любую страницу в интернете (например, google.com, wikipedia.org или vk.com).
2. Нажми F12 (или правой кнопкой → «Исследовать элемент»).
3. Перейди на вкладку Elements — здесь ты видишь DOM-дерево страницы.
4. Найди тег <body> — что у него внутри? (можно нажать на треугольник, чтобы раскрыть).
5. Найди тег <title> — какой текст в нём? (обычно в <head>).
6. Попробуй найти элемент с классом header или menu (если есть).
7. ✏️ Попробуй изменить текст любого элемента: двойной клик по тексту во вкладке Elements и напечатай что-то новое.
8. 🎨 В правой панели (Styles) измени цвет фона любого элемента — найди свойство background или background-color.
9. 🖱️ Нажми на кнопку Выбрать элемент (значок стрелки в левом верхнем углу инспектора) и наведи на любой элемент страницы — браузер сам найдёт его в DOM-дереве.
10. Перейди на вкладку Console и введи document.body — увидишь объект body. Попробуй document.body.style.background = 'red'.

Результат: опиши, какие элементы ты нашёл и какие изменения сделал.