🤔 Где заканчивается js, а где начинается дом ?

JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.

🚩JavaScript

Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.

🚩Основные возможности:

🟠Управление переменными и типами данных:
Объявление переменных (var, let, const). Работа с различными типами данных (строки, числа, объекты, массивы).

🟠Управление потоком:
Условные операторы (if, else, switch). Циклы (for, while, do-while).

🟠Работа с функциями:
Объявление и вызов функций. Работа с анонимными и стрелочными функциями.

🟠Объектно-ориентированное программирование:
Создание объектов и классов. Наследование и полиморфизм.

🚩DOM (Document Object Model)

Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы.

🚩Основные возможности:

🟠Доступ к элементам:
Получение элементов по идентификатору(document.getElementById), классу(document.getElementsByClassName), тегу(document.getElementsByTagName), селектору(document.querySelector, document.querySelectorAll).

🟠Изменение структуры документа:
Создание новых элементов (document.createElement). Добавление и удаление элементов (appendChild, removeChild).

🟠Изменение содержимого и атрибутов:
Изменение текста и HTML-содержимого (element.textContent, element.innerHTML). Управление атрибутами (element.setAttribute, element.getAttribute).

🟠События:
Добавление обработчиков событий (element.addEventListener). Создание и отправка пользовательских событий.

🚩Примеры

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

<!DOCTYPE html>
<html>
<head>
    <title>Пример DOM</title>
</head>
<body>
    <div id="myDiv">Исходный текст</div>
    <button onclick="changeText()">Изменить текст</button>

    <script>
        function changeText() {
            // Получение элемента DOM
            const myDiv = document.getElementById('myDiv');
            // Изменение содержимого элемента
            myDiv.textContent = 'Измененный текст';
        }
    </script>
</body>
</html>

Создание и добавление нового элемента:

<!DOCTYPE html>
<html>
<head>
    <title>Пример добавления элемента</title>
</head>
<body>
    <button onclick="addElement()">Добавить элемент</button>

    <script>
        function addElement() {
            // Создание нового элемента
            const newElement = document.createElement('p');
            newElement.textContent = 'Новый параграф';

            // Добавление нового элемента в DOM
            document.body.appendChild(newElement);
        }
    </script>
</body>
</html>

🚩Граница

JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой.
DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой. Граница между ними можно представить так:

🟠JavaScript:
Работа с данными, логика выполнения, функции, объекты и т.д.

🟠DOM:
Представление HTML-документа как дерева объектов и возможность манипуляции этими объектами через JavaScript.

Ставь 👍 и забирай 📚 Базу знаний