SetAttribute: примеры (JAVASCRIPT)

Базовые примеры использования

Пример 1: Установка простого атрибута.

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

Ссылка

Пример 2: Установка атрибута data-*.

const div = document.getElementById('myDiv');
div.setAttribute('data-info', '123');

Пример 3: Изменение атрибута class.

const btn = document.querySelector('button');
btn.setAttribute('class', 'btn-primary active');

Кнопка

Альтернативные методы в JavaScript

element.getAttribute(name): получает значение атрибута. Рекомендуется использовать для чтения.

element.removeAttribute(name): удаляет атрибут. Эффективен, когда атрибут не нужен.

Свойства DOM: для некоторых стандартных атрибутов (id, className, href) предпочтительнее использовать напрямую свойства элемента, так как они работают быстрее. Например, element.id = 'newId'.

dataset: для работы с data-атрибутами удобнее использовать свойство dataset. Например, element.dataset.info = '123'.

Распространенные ошибки

1. Попытка установки атрибутов для null.

const elem = document.querySelector('.nonexistent');
elem.setAttribute('id', 'new'); // Ошибка: elem равен null

Uncaught TypeError: Cannot read properties of null

2. Некорректное имя атрибута.

element.setAttribute('123', 'value'); // Имя не может начинаться с цифры

Ошибка в спецификации, но браузер может проигнорировать.

3. Установка нестроковых значений без преобразования.

element.setAttribute('count', 5); // Число преобразуется в строку

Атрибут получит значение "5".

Изменения в современных версиях

Метод setAttribute остается стабильным в спецификации DOM. В современных браузерах улучшена обработка пользовательских атрибутов и атрибутов с пространствами имен XML. Рекомендуется использовать data-* атрибуты для пользовательских данных, так как их поддержка стандартизирована.

Расширенные примеры применения

Пример 1: Динамическое изменение стилей через атрибут style.

const block = document.querySelector('.block');
block.setAttribute('style', 'color: red; font-size: 20px;');

Текст

Пример 2: Установка нескольких атрибутов в цикле.

const attrs = { 'lang': 'ru', 'title': 'Подсказка' };
const paragraph = document.querySelector('p');
for (let key in attrs) {
  paragraph.setAttribute(key, attrs[key]);
}

Абзац

Пример 3: Работа с атрибутами форм.

const input = document.querySelector('input[type="text"]');
input.setAttribute('placeholder', 'Введите имя');
input.setAttribute('required', ''); // Булевый атрибут

Пример 4: Изменение типа элемента input.

const input = document.querySelector('input');
input.setAttribute('type', 'password');

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

Аналоги в других языках программирования

Python (библиотека Beautiful Soup):

from bs4 import BeautifulSoup
soup = BeautifulSoup('
', 'html.parser')
div = soup.div
div['class'] = 'container'

PHP (DOMDocument):

$doc = new DOMDocument();
$element = $doc->createElement('div');
$element->setAttribute('id', 'main');

jQuery (JavaScript библиотека):

$('a').attr('href', 'https://site.com');

Устанавливает атрибут href для всех ссылок.