Где заканчивается js, а где начинается DOM?
JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.
JavaScript
Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.
Основные возможности:
Управление переменными и типами данных:
Объявление переменных (
Управление потоком:
Условные операторы (
Работа с функциями:
Объявление и вызов функций. Работа с анонимными и стрелочными функциями.
Объектно-ориентированное программирование:
Создание объектов и классов. Наследование и полиморфизм.
DOM (Document Object Model)
Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы.
Основные возможности:
Доступ к элементам:
Получение элементов по идентификатору(
Изменение структуры документа:
Создание новых элементов (
Изменение содержимого и атрибутов:
Изменение текста и HTML-содержимого (
События:
Добавление обработчиков событий (
Примеры
Изменение содержимого элемента:
Создание и добавление нового элемента:
Граница
JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой.
DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой.
👉 @frontendInterview
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 взаимодействовать с этой структурой.
👉 @frontendInterview
👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
На Yandex Neuro Scale 2025 соберутся лучшие разрабы, тимлиды и архитекторы, чтобы обсудить главные тренды и вызовы IT-индустрии.
В этом году:
Регистрируемся и запоминаем дату и адрес: 24 сентября, Москва, бизнес-центр «Амальтея», Большой бульвар, 40.
Please open Telegram to view this post
VIEW IN TELEGRAM