Прямой доступ к атрибутам: element.id, element.src и др.

1. Что такое "прямой доступ" к атрибутам?

Всё просто: многие HTML-атрибуты для часто используемых элементов (например, id, class, src, href, value, checked, disabled и другие) превращаются в свойства соответствующих DOM-объектов. Это значит, что вы можете обращаться к ним напрямую, как к обычным свойствам объекта в JavaScript.

Пример:

<img id="catPic" src="cat.jpg" alt="Милый котик">

const img = document.getElementById('catPic');
console.log(img.src); // выведет полный путь к картинке
img.src = 'dog.jpg';  // меняем картинку на другую

В отличие от универсальных методов getAttribute/setAttribute, такой подход проще и быстрее, особенно для часто встречающихся атрибутов.

2. Свойства DOM-элементов: самые популярные

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

Атрибут element.id

• Что это: уникальный идентификатор элемента на странице.
• Как работает: напрямую связан с атрибутом id в HTML.

<div id="greeting">Привет!</div>

const div = document.getElementById('greeting');
console.log(div.id); // greeting

div.id = 'welcome'; // теперь у div id="welcome"

Атрибуты element.className и element.classList

• className: строка со всеми классами элемента через пробел.
• classList: специальный объект для удобной работы с классами (добавление, удаление, проверка).

<div class="box red"></div>

const box = document.querySelector('.box');
console.log(box.className); // "box red"

box.className = "box blue"; // теперь у div class="box blue"

⚡️ Совет: для сложных манипуляций с классами лучше использовать classList (например, box.classList.add('active')), но про это будет отдельная лекция.

Атрибут element.src (для <img>, <iframe>, <script> и др.)

Что это: путь к изображению, видео, фрейму и т.д.

<img id="logo" src="logo.png">

const img = document.getElementById('logo');
console.log(img.src); // полный URL картинки

img.src = 'logo2.png'; // меняем картинку

Атрибут element.href (для <a>, <link>, <area>)

Что это: адрес ссылки.

<a id="link" href="https://yandex.ru">Yandex</a>

const link = document.getElementById('link');
console.log(link.href); // https://yandex.ru

link.href = "https://google.com";

Атрибут element.value (для <input>, <textarea>, <select>)

Что это: текущее значение поля ввода или выбора.

<input id="userName" value="Вася">

const input = document.getElementById('userName');
console.log(input.value); // Вася

input.value = "Петя"; // меняем значение в поле ввода

Атрибут element.checked (для <input type="checkbox">, <input type="radio">)

Что это: булевое свойство — отмечен ли чекбокс/радиокнопка.

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

const checkbox = document.getElementById('agree');
console.log(checkbox.checked); // true

checkbox.checked = false; // снимаем галочку

Атрибут element.disabled (для <input>, <button>, <select> и др.)

Что это: булево свойство — заблокирован ли элемент.

<button id="sendBtn" disabled>Отправить</button>

const btn = document.getElementById('sendBtn');
console.log(btn.disabled); // true

btn.disabled = false; // разблокировали кнопку

Атрибуты element.alt, element.title, element.name, element.type и другие

• alt: альтернативный текст для картинок.
• title: всплывающая подсказка.
• name: имя элемента формы.
• type: тип элемента (например, <input type="password">).

<img id="pic" src="cat.jpg" alt="Котик">

const pic = document.getElementById('pic');
console.log(pic.alt); // Котик
pic.alt = "Очень важный кот";

3. Как это связано с вышим учебным приложением?

Давайте продолжим развивать ваше учебное приложение — простую "визитку" пользователя, где можно менять имя и аватарку.

HTML:

<div>
  <img id="avatar" src="avatar1.png" alt="Аватар пользователя">
  <input id="nameInput" value="Аноним">
  <button id="changeBtn">Сменить имя и аватар</button>
</div>

JS:

const avatar = document.getElementById('avatar');
const nameInput = document.getElementById('nameInput');
const btn = document.getElementById('changeBtn');

btn.onclick = function() {
  // Меняем картинку
  avatar.src = 'avatar2.png';
  // Меняем имя
  nameInput.value = 'Супергерой';
  // Меняем alt у картинки
  avatar.alt = 'Аватар супергероя';
};

Что происходит:
При клике на кнопку меняется картинка (src), значение в поле (value) и альтернативный текст (alt) — всё через прямой доступ к свойствам DOM-объектов.

4. Различия между свойствами и атрибутами

Казалось бы, что может быть проще: меняешь element.src — и всё работает. Но иногда возникает путаница между атрибутами (то, что написано в HTML) и свойствами (то, что хранится в DOM-объекте после загрузки страницы).

Атрибут — это то, что написано в HTML

<input id="user" value="Вася">

Атрибут value в HTML — "Вася".

Свойство — это текущее значение в DOM

const input = document.getElementById('user');
console.log(input.value); // Вася
input.value = "Петя";
console.log(input.getAttribute('value')); // Вася (атрибут не изменился!)

Внимание! Если вы меняете свойство value, то в DOM оно поменяется, но в исходном HTML-атрибуте — нет.
Если вы хотите изменить атрибут, используйте setAttribute:

input.setAttribute('value', 'Петя');

Теперь и атрибут в HTML поменяется, но если пользователь потом что-то введёт в поле, свойство value изменится, а атрибут — нет.

Аналогия: Атрибут — это "заводская настройка", а свойство — "текущее состояние".

5. Когда использовать свойства, а когда методы getAttribute/setAttribute?

Свойства используйте для часто встречающихся стандартных атрибутов (id, value, checked, src, href, disabled, alt и т.д.). Это быстрее, проще и привычнее.

Методы getAttribute/setAttribute используйте для:

• нестандартных или кастомных атрибутов (например, data-user-id),
• работы с атрибутами, которые не имеют свойства (например, data-*),
• если важно именно то, что написано в HTML, а не текущее состояние элемента.

Пример с кастомным атрибутом:

<div id="userCard" data-user-id="42"></div>

const card = document.getElementById('userCard');
console.log(card.getAttribute('data-user-id')); // 42
// card.data-user-id — такого свойства нет!

6. Практика: меняем свойства элементов на лету

Продолжим тренироваться на нашем приложении.

Переключаем картинку по клику

HTML:

<img id="pet" src="cat.png" alt="Котик">
<button id="switchBtn">Сменить питомца</button>

JS:

const pet = document.getElementById('pet');
const btn = document.getElementById('switchBtn');

btn.onclick = function() {
  if (pet.src.includes('cat.png')) {
    pet.src = 'dog.png';
    pet.alt = 'Пёсик';
  } else {
    pet.src = 'cat.png';
    pet.alt = 'Котик';
  }
};

Что происходит:
При каждом клике меняется картинка и alt-текст.

Управляем кнопкой

HTML:

<input id="nameField" value="Гость">
<button id="saveBtn" disabled>Сохранить</button>

JS:

const nameField = document.getElementById('nameField');
const saveBtn = document.getElementById('saveBtn');

// Разблокируем кнопку, если имя не пустое
nameField.oninput = function() {
  saveBtn.disabled = nameField.value.trim() === '';
};

Что происходит:
Кнопка становится активной только если в поле что-то введено.

7. Таблица соответствия популярных атрибутов и свойств

id

id

class

className

src

src

href

href

value

value

checked

checked

disabled

disabled

alt

alt

title

title

name

name

type

type

8. Типичные ошибки при прямом доступе к атрибутам

Ошибка №1: Путаница между атрибутом и свойством.
Часто новички меняют свойство (например, input.value), а потом удивляются, почему атрибут в HTML (value в исходнике) не меняется. Помните: атрибут — это "настройка по умолчанию", свойство — "текущее состояние".

Ошибка №2: Использование element.class вместо className.
В JS нельзя писать element.class — это зарезервированное слово. Используйте element.className или, для продвинутых манипуляций, element.classList.

Ошибка №3: Ожидание, что свойство src или href вернёт ровно то, что написано в HTML.
На самом деле свойство возвращает абсолютный путь, а не относительный, так что не пугайтесь длинных URL.

Ошибка №4: Попытка обратиться к свойству, которого нет у элемента.
Например, у <div> нет свойства src, и попытка обратиться к нему даст undefined. Проверяйте, что свойство реально существует для вашего элемента.

Ошибка №5: Манипуляции с нестандартными атрибутами через свойства.
Для data-* и других кастомных атрибутов используйте только getAttribute/setAttribute, либо специальный объект dataset (про него впереди).

1

Задача

Модуль 1: Web Core, 22 уровень, 6 лекция

Недоступна

Ошибки в async/await

Ошибки в async/await

Открыть

1

Задача

Модуль 1: Web Core, 22 уровень, 6 лекция

Недоступна

Глобальные ошибки

Глобальные ошибки

Открыть