👩‍💻 Объясни понятие "блочная модель" в CSS

Блочная модель в CSS — ключевое понятие, которое описывает, как элементы отображаются на веб-странице. Все элементы в HTML можно представить как блоки, которые занимают пространство и взаимодействуют друг с другом. В блочной модели рассматриваются четыре основных компонента каждого элемента:

1. Content (Содержимое): Это фактический контент элемента, например текст или изображение.
2. Padding (Поле): Пространство между содержимым и границей элемента, добавляет отступ вокруг контента.
3. Border (Граница): Линия вокруг области элемента, разделяет элемент от окружающих элементов.
4. Margin (Внешний отступ): Пространство между границей элемента и другими элементами, обеспечивает расстояние между элементами.

Пример кода:

.box {
  width: 300px; /* Ширина блока */
  height: 150px; /* Высота блока */
  padding: 20px; /* Отступ внутри блока */
  border: 5px solid black; /* Граница блока */
  margin: 10px; /* Внешний отступ вокруг блока */
}

В этом примере элемент с классом .box имеет заданные ширину и высоту, отступы, границу и внешний отступ. Это влияет на то, как элемент будет отображаться на странице и как он будет взаимодействовать с другими элементами.

Важно помнить, что размеры элементов в блочной модели складываются, что может повлиять на общий размер элемента и расположение на странице. Понимание этой модели помогает создавать более организованные и предсказуемые веб-страницы.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как изменить контекст функции с помощью методов call, apply и bind?

В JavaScript контекст функции (значение this) можно изменять с помощью методов call, apply и bind. Эти методы позволяют вызывать одну и ту же функцию в разных контекстах, что удобно для работы с различными объектами.

Метод call

Метод call вызывает функцию с заданным значением this и аргументами, передаваемыми по отдельности.

Пример:

function greet() {
  console.log(`Hello, ${this.name}`);
}

const user = {
  name: 'Alice'
};

// Изменение контекста на объект user
greet.call(user); // Вывод: Hello, Alice

Метод apply

Метод apply также вызывает функцию с заданным значением this, но аргументы передаются в виде массива.

Пример:

function introduce(age, city) {
  console.log(`My name is ${this.name}, I am ${age} years old and I live in ${city}.`);
}

const person = {
  name: 'Bob'
};

// Изменение контекста на объект person
introduce.apply(person, [30, 'New York']); // Вывод: My name is Bob, I am 30 years old and I live in New York.

Метод bind

Метод bind возвращает новую функцию, которая всегда будет иметь определённое значение this, а также может принимать аргументы. Однако функция не вызывается сразу.

Пример:

function showInfo() {
  console.log(`User: ${this.name}`);
}

const user1 = {
  name: 'Charlie'
};

// Создание новой функции с заранее установленным контекстом
const boundShowInfo = showInfo.bind(user1);
boundShowInfo(); // Вывод: User: Charlie

Итак, call и apply вызывают функцию немедленно с определенным контекстом, а bind создаёт новую функцию с привязанным контекстом, которую можно вызывать позже. Эти методы полезны для управления контекстом в JavaScript, особенно при работе с методами объектов и обратными вызовами.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как создать упорядоченный и неупорядоченный список?

Создание упорядоченного и неупорядоченного списков в HTML — это простой и удобный способ структурирования информации. Эти списки используют соответствующие теги для оформления элементов.

Неупорядоченный список

Неупорядоченный список создается с помощью тега <ul> (unordered list), а каждый элемент списка обозначается тегом <li> (list item). Элементы в таком списке отображаются с маркерами.

Пример:

<ul>
  <li>Item 1</li> <!-- Первый элемент списка -->
  <li>Item 2</li> <!-- Второй элемент списка -->
  <li>Item 3</li> <!-- Третий элемент списка -->
</ul>

Упорядоченный список

Упорядоченный список создается с помощью тега <ol> (ordered list), а элементы также обозначаются тегом <li>. Элементы в этом типе списка отображаются с нумерацией.

Пример:

<ol>
  <li>First item</li> <!-- Первый элемент списка -->
  <li>Second item</li> <!-- Второй элемент списка -->
  <li>Third item</li> <!-- Третий элемент списка -->
</ol>

Таким образом, неупорядоченные списки подойдут для представления информации, где порядок не важен, тогда как упорядоченные списки используются, когда порядок имеет значение. Эти элементы можно стилизовать с помощью CSS и комбинировать с другими HTML-элементами для создания более сложных структур.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

Создали каналы по новым направлениям
Присоединяйся!

👩‍💻 Git
🖥 SQL
👩‍💻 QA

👩‍💻 Что такое enum и как его использовать?

enum в TypeScript — это специальный тип, который позволяет определять набор именованных констант. Перечисления (enums) упрощают работу с набором связанных значений, делая код более читабельным и понятным.

Создание enum

Перечисление создается с помощью ключевого слова enum, за которым следует имя и тело перечисления, в котором перечисляются его члены.

Пример:

enum Direction {
  Up = 1,      // Направление вверх
  Down = 2,    // Направление вниз
  Left = 3,    // Направление влево
  Right = 4    // Направление вправо
}

Использование enum

Члены перечисления могут быть использованы как значения. Пример:

function move(direction: Direction) {
  switch (direction) {
    case Direction.Up:
      console.log("Moving up");
      break;
    case Direction.Down:
      console.log("Moving down");
      break;
    case Direction.Left:
      console.log("Moving left");
      break;
    case Direction.Right:
      console.log("Moving right");
      break;
  }
}

// Вызов функции с использованием enum
move(Direction.Up); // Вывод: Moving up

Автоматическая нумерация

Если не указывать значения для членов перечисления, TypeScript будет автоматически присваивать им числовые значения, начиная с нуля.

Пример:

enum Color {
  Red,     // 0
  Green,   // 1
  Blue     // 2
}

console.log(Color.Red); // Вывод: 0

Строковые перечисления

Можно также создавать строковые перечисления, где каждому члену присваивается строковое значение.

Пример:

enum Status {
  Pending = "PENDING",
  InProgress = "IN_PROGRESS",
  Completed = "COMPLETED"
}

console.log(Status.Pending); // Вывод: PENDING

Перечисления в TypeScript помогают организовать код, обеспечивая структурированное представление стандартных наборов значений. Это делает код более читабельным и легким для понимания.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает условный рендеринг в React?

Условный рендеринг в React позволяет отображать различные компоненты или элементы в зависимости от условия. Это полезно для создания динамических интерфейсов. Рассмотрим несколько способов, как можно реализовать условный рендеринг.

1. Использование тернарного оператора

function Greeting({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

В этом примере отображается приветствие в зависимости от того, вошел ли пользователь в систему или нет.

2. Условная проверка с if

function Greeting({ isLoggedIn }) {
    let message;

    if (isLoggedIn) {
        message = <h1>Welcome back!</h1>;
    } else {
        message = <h1>Please sign in.</h1>;
    }

    return <div>{message}</div>;
}

В данном случае используется конструкция if для определения значения сообщения.

3. Использование логического оператора &&

function Notification({ message }) {
    return (
        <div>
            {message && <h2>{message}</h2>} 
        </div>
    );
}

Здесь сообщение отображается только если оно существует. Если message — это ложное значение, компонент ничего не рендерит.

4. Вынесение условий в отдельные функции

function Greeting({ isLoggedIn }) {
    const renderMessage = () => {
        if (isLoggedIn) {
            return <h1>Welcome back!</h1>;
        } else {
            return <h1>Please sign in.</h1>;
        }
    };

    return <div>{renderMessage()}</div>;
}

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

Условный рендеринг помогает создавать интерактивные и отзывчивые пользовательские интерфейсы, упрощая управление видимостью элементов в зависимости от состояния приложения.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни разницу между функцией и методом

В JavaScript существуют две основные категории: функции и методы. Хотя они имеют много общего, между ними есть важные отличия.

1. Функция

Функция — это независимый блок кода, который можно вызывать в любом месте программы. Она может принимать параметры и возвращать значение.

function add(a, b) {
    return a + b; // Возвращает сумму двух чисел
}

const result = add(2, 3); // Вызов функции
console.log(result); // 5

В этом примере add — это функция, которая не привязана к какому-либо объекту.

2. Метод

Метод — это функция, которая является свойством объекта. Методы вызываются от имени объекта и могут взаимодействовать с его свойствами.

const calculator = {
    add: function(a, b) {
        return a + b; // Возвращает сумму двух чисел
    }
};

const result = calculator.add(2, 3); // Вызов метода
console.log(result); // 5

Здесь add является методом объекта calculator. Он вызывается через объект и может иметь доступ к его свойствам и другим методам.

Основные отличия:

- Функции являются независимыми единицами кода, в то время как методы привязаны к объектам.
- Методы могут взаимодействовать с другими свойствами и методами объекта, в то время как обычные функции этого не могут.

Понимание этих различий помогает лучше организовать код и использовать объектно-ориентированные подходы в JavaScript.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое margin и padding? В чем их отличие?

В веб-разработке margin и padding играют важную роль в управлении пространством между элементами.

Margin - это внешний отступ элемента. Он создает пространство между элементом и его соседями. Например, если нужно отдалить один блок от другого, используется margin.

.box {
    margin: 20px; /* Создает внешний отступ в 20 пикселей со всех сторон */
}

Padding - это внутренний отступ элемента. Он создает пространство между содержимым элемента и его границами. Padding используется для увеличения пространства внутри элемента.

.box {
    padding: 15px; /* Создает внутренний отступ в 15 пикселей со всех сторон */
}

Основные отличия:
1. Margin - это внешнее пространство, padding - внутреннее.
2. Margin влияет на расположение элементов друг относительно друга, padding - на размер самого элемента.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое мета-теги в HTML и для чего они используются?

Мета-теги в HTML - это специальные теги, которые располагаются внутри секции <head> и содержат информацию о веб-странице. Они не отображаются на самой странице, но играют важную роль в SEO, социальных сетях и управлении браузером.

Вот некоторые основные мета-теги и их назначения:

1. Charset - задает кодировку символов страницы.

<meta charset="UTF-8"> 
<!-- Устанавливает кодировку UTF-8, которая поддерживает множество языков и символов -->

2. Viewport - помогает адаптировать страницу для мобильных устройств.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Устанавливает ширину страницы в соответствии с шириной устройства и начальный масштаб -->

3. Denoscription - предоставляет описание страницы, которое может отображаться в результатах поиска.

<meta name="denoscription" content="Краткое описание содержимого страницы."> 
<!-- Помогает поисковым системам понять содержание страницы и улучшает SEO -->

4. Keywords - указывает ключевые слова, связанные с содержимым страницы.

<meta name="keywords" content="HTML, CSS, JavaScript"> 
<!-- Используется для оптимизации поисковых систем, но сейчас имеет менее значительное влияние -->

5. Robots - задает инструкции для поисковых роботов.

<meta name="robots" content="index, follow"> 
<!-- Указывает, следует ли индексировать страницу и следовать по ссылкам на ней -->

Использование мета-тегов помогает улучшить видимость страниц в поисковых системах, оптимизировать отображение на мобильных устройствах и управлять поведением браузеров.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как обрабатывать события в React?

В React обработка событий происходит с использованием синтаксиса, похожего на JavaScript, однако с некоторыми отличиями. Важно помнить, что события в React обрабатываются в стиле camelCase, и нужно передавать обработчики событий как функции.

Вот основные шаги для обработки событий в React:

1. Определение обработчика события: Определяется функция, которая будет обрабатывать событие.

function handleClick() {
    alert('Кнопка нажата');
}

2. Привязка обработчика к компоненту: Обработчик события передается как атрибут JSX.

function MyButton() {
    return (
        <button onClick={handleClick}>
            Нажми меня
        </button>
    );
}

3. Работа с состоянием: В случае работы с состоянием, можно использовать хук useState.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1); // Увеличивает счетчик на 1
    }

    return (
        <div>
            <p>Счетчик: {count}</p>
            <button onClick={handleClick}>
                Увеличить
            </button>
        </div>
    );
}

4. Передача параметров: Для передачи параметров в обработчик, можно использовать стрелочные функции.

function MyComponent() {
    function handleClick(param) {
        alert(`Переданный параметр: ${param}`);
    }

    return (
        <button onClick={() => handleClick('Hello')}>
            Нажми меня
        </button>
    );
}

Таким образом, обработка событий в React дает возможность взаимодействовать с пользователями и управлять состоянием компонентов на основе их действий.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать аннотации типов для функций?

В TypeScript аннотации типов для функций помогают явно указать типы аргументов и возвращаемого значения. Это обеспечивает лучшую поддержку автозаполнения и раннее выявление ошибок. Вот основные способы использования аннотаций типов для функций в TypeScript.

1. Типизация аргументов функции:

function add(a: number, b: number): number {
    return a + b; // Функция принимает два числа и возвращает число
}

2. Типизация функции без возвращаемого значения:

function logMessage(message: string): void {
    console.log(message); // Функция принимает строку и ничего не возвращает
}

3. Функции с параметрами по умолчанию:

function multiply(a: number, b: number = 1): number {
    return a * b; // Параметр b имеет значение по умолчанию
}

4. Функции с неопределенным количеством аргументов:

function concatenate(...args: string[]): string {
    return args.join(' '); // Функция принимает переменное количество строк и возвращает их объединение
}

5. Типы функций как значения:

type MathOperation = (a: number, b: number) => number;

const subtract: MathOperation = (a, b) => a - b; // Использование типа для переменной функции

Использование аннотаций типов в функциях TypeScript делает код более читабельным и помогает избежать ошибок, связанных с несоответствием типов. Это особенно полезно в больших проектах, где четкое указание типов способствует лучшему пониманию логики и структуры кода.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как задать отступы только для одной стороны элемента?

В CSS можно задать отступы (margin) для одной стороны элемента с помощью следующих свойств:

1. margin-top – отступ сверху
2. margin-right – отступ справа
3. margin-bottom – отступ снизу
4. margin-left – отступ слева

Пример использования:

.element {
    margin-top: 20px;   /* Отступ сверху */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 5px; /* Отступ снизу */
    margin-left: 15px;  /* Отступ слева */
}

Для задания отступа только с одной стороны, можно оставить остальные свойства без значения или установить их в 0:

.element {
    margin-top: 20px;   /* Отступ сверху */
    margin-right: 0;    /* Нет отступа справа */
    margin-bottom: 0;   /* Нет отступа снизу */
    margin-left: 0;     /* Нет отступа слева */
}

Также есть сокращенная запись для задания отступов:

.element {
    margin: 20px 0 0 0; /* Отступ сверху 20px, остальные 0 */
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работают условные операторы if, else if и else?

Условные операторы в JavaScript позволяют выполнять различные блоки кода в зависимости от выполнения определенных условий. Основные операторы: if, else if и else.

Пример работы условных операторов:

const temperature = 20; // Задаем переменную temperature

if (temperature > 25) {
    console.log("Слишком жарко"); // Если температура больше 25, выводим это сообщение
} else if (temperature >= 15 && temperature <= 25) {
    console.log("Умеренная температура"); // Если температура в диапазоне 15-25, выводим это сообщение
} else {
    console.log("Прохладно"); // Если ни одно из предыдущих условий не выполнено, выводим это сообщение
}

Объяснение кода:

1. Условие в if проверяет, превышает ли значение temperature 25.
2. Если условие истинно, выполняется код внутри if.
3. Если условие ложно, проверяется else if: возможно, температура находится в диапазоне от 15 до 25.
4. Если указанные условия не выполнены, выполняется код в блоке else.

Эта конструкция позволяет гибко управлять логикой программы в зависимости от значений переменных.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Какие существуют типы input формах?

В HTML элементе <input> атрибут type определяет тип. Основные типы input:

- text: однострочное текстовое поле.
- password: для ввода пароля, скрывает символы.
- email: для ввода email, проверяет формат.
- number: поле для чисел.
- checkbox: флажок для выбора.
- radio: выбор одного из нескольких вариантов.
- submit: кнопка отправки формы.

Пример использования:

<!-- Текстовое поле -->
<input type="text" name="username">

<!-- Поле пароля -->
<input type="password" name="password">

<!-- Флажок согласия с условиями -->
<input type="checkbox" name="agree">

<!-- Кнопка отправки формы -->
<input type="submit" value="Submit">

Использование соответствующих типов input повышает удобство формы для пользователя и обеспечивает корректность введённых данных.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое синтетические события в React?

Синтетические события в React — это кроссбраузерная оболочка над нативными событиями браузера. React объединяет события различных браузеров в единый интерфейс, обеспечивая одинаковое поведение во всех окружениях.

Синтетические события имитируют поведение нативных событий и предоставляют те же свойства и методы. Это упрощает работу с событиями, избавляя от необходимости обрабатывать различия между браузерами.

Пример обработки события клика в React:

function handleClick(event) {
  // Предотвращение стандартного поведения
  event.preventDefault();
  
  // Получение значений из события
  const button = event.button; // Кнопка мыши
  const target = event.target; // Элемент, на который кликнули
}

<button onClick={handleClick}>Click me</button>

В этом примере event — это синтетическое событие React. Использование синтетических событий обеспечивает стабильную и предсказуемую обработку взаимодействий пользователя в приложениях.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Зачем нужно свойство box-sizing и какие значения оно принимает?

Свойство box-sizing в CSS определяет способ расчёта общей ширины и высоты элемента. Оно контролирует, включаются ли padding и border в размеры, заданные свойствами width и height.

Основные значения:

- content-box (по умолчанию): размеры width и height применяются только к содержимому. Padding и border добавляются сверху, увеличивая общий размер элемента.

- border-box: размеры width и height включают в себя содержимое, padding и border. Это облегчает расчёт размеров и предотвращает неожиданное увеличение элемента.

Пример использования:

/* Применение border-box ко всем элементам */
* {
  box-sizing: border-box;
}

Устанавливается для всех элементов, чтобы width и height включали padding и border

Использование box-sizing: border-box помогает избегать проблем с расчётом размеров элементов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает цикл for?

В JavaScript цикл for используется для повторения блока кода определённое количество раз. Он состоит из трёх частей: инициализации, условия и итерации.

Синтаксис:

for (initialization; condition; iteration) {
    // Код, который будет повторяться
}

Например, вывести числа от 1 до 5:

for (let i = 1; i <= 5; i++) {
    console.log(i); // Выводит числа от 1 до 5
}

- Инициализация: let i = 1; объявляется переменная и устанавливается начальное значение.
- Условие: i <= 5; цикл продолжается, пока условие истинно.
- Итерация: i++ увеличивает значение переменной после каждой итерации.

Цикл for полезен, когда известно точное количество повторений.

Для перебора элементов массива:

const array = ['a', 'b', 'c'];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]); // Выводит элементы массива
}

Этот цикл проходит по индексам массива от 0 до array.length - 1.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое перегрузка функций?

Перегрузка функций в TypeScript позволяет одной функции поддерживать различные сигнатуры вызовов, обеспечивая гибкость типизации.

// Объявление перегруженных сигнатур
function combine(a: string, b: string): string;
function combine(a: number, b: number): number;

// Реализация функции
function combine(a: any, b: any): any {
    if (typeof a === 'string' && typeof b === 'string') {
        return a + b;
    }
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    }
    throw new Error('Неверные типы аргументов');
}

const result1 = combine('Hello, ', 'World!'); // Строка
const result2 = combine(10, 20); // Число

Каждая перегруженная сигнатура определяет допустимые типы аргументов и возвращаемое значение. Реализация функции должна обрабатывать все возможные варианты.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает свойство display в CSS?

Свойство display в CSS определяет, как элемент отображается на странице и как он влияет на окружающие элементы. Оно задает тип коробки (box) для элемента и определяет его участие в потоке документа.

Основные значения:

- block: Элемент отображается как блочный. Занимает всю ширину родителя, начинается с новой строки.
- inline: Элемент отображается как строчный. Не начинается с новой строки, размеры зависят от содержимого.
- inline-block: Комбинирует свойства block и inline. Элемент строчный, но поддерживает заданные ширину и высоту.
- none: Элемент не отображается и не занимает места в документе.

Пример:

/* Элемент скрыт и не занимает места */
.hidden {
  display: none;
}

/* Элемент отображается как строчно-блочный */
.button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

<!-- Блочный элемент -->
<div style="display: block;">Блочный div</div>

<!-- Строчный элемент -->
<span style="display: inline;">Строчный span</span>

<!-- Строчно-блочный элемент -->
<div style="display: inline-block;">Строчно-блочный div</div>

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Чем отличаются синтетические события от нативных?

Синтетические события — это события, создаваемые фреймворками или библиотеками для абстрагирования работы с событиями в разных браузерах. Например, в React используется SyntheticEvent, который обеспечивает единообразие интерфейса событий и корректную работу обработчиков независимо от особенностей браузера. Синтетические события облегчают обработку событий, устраняя необходимость учитывать различия в реализации DOM-событий.

Нативные события — это события, предоставляемые самим браузером через DOM API. Они могут иметь различия в поведении и структуре в зависимости от браузера, что может усложнять разработку кроссбраузерных приложений.

Пример синтетического события в React:

function handleClick(event) {
  // event — это SyntheticEvent в React
  // Имеет единый интерфейс во всех браузерах
  event.preventDefault();
}

Пример нативного события:

document.getElementById('myButton').addEventListener('click', function(event) {
  // event — это нативное событие браузера
  // Поведение может отличаться в разных браузерах
  event.preventDefault();
});

Таким образом, синтетические события обеспечивают кроссбраузерную совместимость и упрощают работу с событиями, в то время как нативные события предоставляют прямой доступ к функционалу браузера, но могут требовать дополнительных усилий для обеспечения совместимости.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни концепцию объектной модели документа (DOM)

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

DOM предоставляет методы и свойства для взаимодействия с элементами страницы: можно добавлять, удалять или изменять элементы, а также реагировать на действия пользователя. Это основа для создания динамичных и интерактивных веб-приложений.

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

// Получение элемента по id
const element = document.getElementById('myElement');
// Изменение текста элемента
element.textContent = 'Новый текст';

Пример добавления нового элемента:

// Создание нового элемента div
const newDiv = document.createElement('div');
// Добавление текста в новый div
newDiv.textContent = 'Новый див';
// Вставка нового div в конец body
document.body.appendChild(newDiv);

Эти примеры демонстрируют, как с помощью DOM можно управлять содержимым страницы в реальном времени, создавая динамические и интерактивные интерфейсы.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈