Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге.

JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно.

Получение значения атрибута элемента

Метод getAttribute() используется для получения текущего значения атрибута элемента.

Если указанный атрибут не существует в элементе, он вернет null. Вот пример:

<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Выбираем элемент по ID
    var link = document.getElementById("myLink");
    
    // Получаем значение атрибута
    var href = link.getAttribute("href");
    alert(href); // Outputs: https://www.google.com/
    
    var target = link.getAttribute("target");
    alert(target); // Outputs: _blank
</script>

JavaScript предоставляет несколько различных способов выбора элементов на странице. Подробнее см. Руководство по селекторам DOM в JavaScript.

Установка атрибутов для элементов

Метод setAttribute() используется для установки атрибута для указанного элемента.

Если атрибут уже существует в элементе, значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением. Код JavaScript в следующем примере добавит class и disabled атрибут к элементу <button>.

<button type="button" id="myBtn">Click Me</button>

<script>
    // Выбираем элемент
    var btn = document.getElementById("myBtn");
	
    // Устанавливаем новые атрибуты
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

Аналогично, вы можете использовать метод setAttribute() для обновления или изменения значения существующего атрибута в элементе HTML. Код JavaScript в следующем примере обновит значение существующего атрибута href элемента <a>.

<a href="#" id="myLink">Ссылка</a>

<script>
    // Выбираем элемент
    var link = document.getElementById("myLink");
	
    // Изменяем значение атрибута href
    link.setAttribute("href", "https://artzolin.ru/");
</script>

Удаление атрибутов из элементов

Метод removeAttribute() используется для удаления атрибута из указанного элемента.

Код JavaScript в следующем примере удалит атрибут href из элемента <a>.

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Выбираем элемент
    var link = document.getElementById("myLink");
	
    // Удаляем атрибут href
    link.removeAttribute("href");
</script>