Frontend | Вопросы собесов

🤔 Где заканчивается 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.



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