🤔 Что известно про сложность алгоритмов?

Сложность алгоритма описывает, насколько быстро растёт время или память, необходимая для выполнения задачи при увеличении объёма данных. Обозначается как Big O:
- O(1) — константная;
- O(log n) — логарифмическая;
- O(n) — линейная;
- O(n²) — квадратичная и т.д.
Используется для анализа эффективности кода и оптимизации.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие есть альтернативы ssr?

В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.

🚩CSR (Client-Side Rendering)

Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.

<div id="app"></div>
<script src="bundle.js"></script>

🚩Плюсы

➕Быстрая работа после загрузки
Приложение становится очень интерактивным после инициализации.
➕Меньшая нагрузка на сервер
Основная работа выполняется на клиентской стороне.
➕Гибкость и модульность
Легко добавлять сложные интерактивные компоненты.

🚩Минусы

➖Медленная первая загрузка (Time to First Byte, TTFB)
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
➕Проблемы с SEO
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
➖Требования к устройствам
Больше ресурсов требуется на стороне клиента.

🚩SSG (Static Site Generation)

Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.

npm run build

🚩Плюсы и минусы

➕Молниеносная загрузка
HTML статичен и отдается сервером без обработки.
➕SEO-дружелюбность
Поисковые системы могут легко индексировать готовый HTML.
➕Уменьшение нагрузки на сервер
Все вычисления выполняются заранее (во время сборки).
➖Ограничения при частых обновлениях контента
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
➖Не подходит для динамических данных
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.

🚩ISR (Incremental Static Regeneration)

Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.

export async function getStaticProps() {
  return {
    props: {
      data: fetchData(),
    },
    revalidate: 60, // Обновлять страницу каждые 60 секунд
  };
}

🚩Плюсы и минусы

➕Лучшая производительность
Страницы отдаются как статические, но обновляются при необходимости.
➕Гибкость
Удобно для контента, который редко обновляется.
➕SEO
Поисковики видят статические страницы.
➖Сложнее настроить
Нужно управлять кэшированием и интервалами обновления.
➖Не подходит для полностью динамических страниц
Если обновления контента слишком частые, ISR может не подойти.

🚩DPR (Dynamic Rendering / Hybrid Rendering)

Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.

🚩Плюсы и минусы

➕Оптимально для SEO
Боты получают готовый HTML.
➕Гибкость
Пользователи получают интерактивные страницы через CSR.
➖Усложнение архитектуры
Нужно отслеживать запросы и разделять их.
➖Задержки для ботов
Генерация страницы на сервере может занять время.

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

🤔 Что делает box-sizing: border-box?

Изменяет модель расчёта размеров элемента:
1. Ширина и высота включают содержимое, padding и border.
2. Это упрощает управление размерами, так как итоговый размер элемента остаётся фиксированным.
Без border-box (по умолчанию content-box), padding и border увеличивают размеры элемента, что усложняет расчёты.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Когда брать абсолютные величины а когда относительные?

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

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh)

Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование

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

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

🤔 Назови паттерны, которые относятся к порождающим.

- Singleton — единственный экземпляр;
- Factory Method — создание объектов через метод;
- Abstract Factory — фабрика для семейства объектов;
- Builder — пошаговое создание объекта;
- Prototype — копирование существующего объекта.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое usecontext?

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

🚩Как он работает

🟠Создание контекста
Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

      import React, { createContext, useState } from 'react';

   const MyContext = createContext();
   

🟠Provider
Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };
   

🟠useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };
   

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

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

🤔 Как работает передача по ссылке и по значению?

- По значению: копируется само значение (например, примитивы). Изменение копии не влияет на оригинал.
- По ссылке: копируется ссылка на объект в памяти. Изменения влияют на оригинал, т.к. оба указывают на одну область памяти.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чем отличие атрибутов от свойств в html тегах?

Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.

Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!

🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`)
Хранятся в объекте элемента (HTMLElement).
Имеют разные типы данных (строки, числа, булевые и т. д.).
Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами?
Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.).
Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

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

🤔 Какие семантические группы есть?

В HTML есть теги, которые несут семантическое значение, то есть описывают смысл содержимого, а не просто визуальное оформление.
Примеры групп:
- Структура страницы: <header>, <main>, <footer>, <section>, <article>, <aside>, <nav>
- Контент: <p>, <h1>–<h6>, <blockquote>, <figure>
- Формы и элементы управления: <form>, <input>, <button>, <label>
- Таблицы и списки: <ul>, <ol>, <table>, <thead>, <tbody>
Семантика помогает поисковикам, скринридерам и поддерживает доступность.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как достигается изоляция при использовании бэм?

БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым.

🚩Как БЭМ предотвращает конфликты?

🟠Все стили зависят только от конкретного блока
В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.

<div class="button">Кнопка</div>

.button {
  background: blue;
  color: white;
}

Плохой пример без БЭМ

.container .button {
  background: blue;
}

🟠Элементы (`__`) зависят только от своего блока
Стили элемента никогда не зависят от родителя — только от блока.

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text">Текст карточки</p>
</div>

.card__title {
  font-size: 20px;
}

.card__text {
  color: gray;
}

🟠Модификаторы (`--`) изменяют только нужные стили
Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.

<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
  padding: 10px;
  border-radius: 5px;
}

.button--red {
  background: red;
}

.button--blue {
  background: blue;
}

🟠Имена классов уникальны, нет глобальных стилей
В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.

h1 {
  color: red;
}

БЭМ-версия

.card__title {
  color: red;
}

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

🤔 Чем отличаются между собой Shadow DOM, Virtual DOM и Regular DOM?

- Shadow DOM — изолированный мини-DOM внутри компонента;
- Virtual DOM — абстрактная копия DOM в памяти (используется React, Vue);
- Regular DOM — основной объект модели документа браузера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое нотация о-большое?

O-большое (Big O) — это способ описания эффективности алгоритма в зависимости от размера входных данных. Она показывает, как быстро растёт время выполнения или использование памяти при увеличении количества входных данных.

🚩Зачем нужна O-большое?

Когда мы пишем код, важно понимать, насколько он эффективен, особенно при работе с большими массивами или сложными вычислениями.
Big O помогает:
- Оценить время работы алгоритма.
- Понять, как алгоритм масштабируется.
- Сравнить разные алгоритмы и выбрать лучший.

🚩Примеры сложности алгоритмов

O(1) – Константное время

function getFirstElement(arr) {
  return arr[0]; // Не зависит от размера массива
}

O(N) – Линейное время

function findElement(arr, target) {
  for (let i = 0; i < arr.length; i++) { 
    if (arr[i] === target) return i;
  }
  return -1;
}

O(N²) – Квадратичное время (плохо)

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
  return arr;
}

O(log N) – Логарифмическое время (оптимально)

function binarySearch(arr, target) {
  let left = 0, right = arr.length - 1;
  
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }

  return -1;
}

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

🤔 Что такое flex-flow сокращение?

Свойство flex-flow — это шорткат для двух свойств: flex-direction и flex-wrap. Упрощает запись.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чём преимущество синтаксического сахара в виде async await над promise?

Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее.

🟠`async/await` проще читать и писать

Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all()
Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

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

🤔 Что значит type="submit"?

Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет?

Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей

Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены.

🚩Порядок приоритетов CSS

Inline стили (наивысший приоритет)
ID селекторы
Классы, псевдоклассы и атрибуты
Элементы и псевдоэлементы (наименьший приоритет)
Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей.

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

🤔 Как следишь за код-стайлом?

- Использую линтеры: ESLint, Prettier;
- Соблюдаю командные code style гайды;
- Использую автоматические форматтеры в IDE;
- Настраиваю pre-commit хуки (через Husky, lint-staged).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое git-flow?

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

🚩Основные ветки

🟠master
Содержит стабильную версию кода, готовую к выпуску (release).
🟠develop
Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

🚩Вспомогательные ветки

🟠feature
Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.

🟠release
Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.

🟠hotfix
Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

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

🤔 Что происходит, когда мы запрашиваем веб-страницу?

1. Ввод URL → преобразование через DNS в IP.
2. Устанавливается соединение с сервером.
3. Отправляется HTTP-запрос.
4. Сервер обрабатывает запрос и возвращает HTML.
5. Браузер начинает разбор, построение DOM, загрузку ресурсов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чем отличие атрибутов от свойств в html тегах?

Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.

Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!

🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`)
Хранятся в объекте элемента (HTMLElement).
Имеют разные типы данных (строки, числа, булевые и т. д.).
Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами?
Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.).
Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

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