`.getAttribute()`

Время чтения: меньше 5 мин

Кратко

Метод Element.getAttribute позволяет получить значение указанного атрибута у HTML-элемента. Если атрибута нет, то метод вернёт null.

Как пишется

Element.getAttribute принимает один аргумент – строку с именем атрибута. В ответ метод возвращает значение атрибута в виде строки или null, если атрибута нет на элементе.

        
          
          <script type="application/json" id="hydration"></script>
          <script type="application/json" id="hydration"></script>

        
          
          const scriptElement = document.querySelector('script')scriptElement.getAttribute('type')// 'application/json'scriptElement.getAttribute('id')// 'hydration'scriptElement.getAttribute('class')// null
          const scriptElement = document.querySelector('script')

scriptElement.getAttribute('type')
// 'application/json'
scriptElement.getAttribute('id')
// 'hydration'
scriptElement.getAttribute('class')
// null

Как понять

Существует множество стандартных HTML-атрибутов, и разработчики могут задавать элементу свои собственные атрибуты. Метод Element.getAttribute является универсальным способом прочитать значение любого атрибута.

Не все атрибуты имеет смысл считывать с помощью Element.getAttribute. Значения атрибутов, доступные в объекте DOM-элемента, как например Element.hidden или Element.dataset, лучше считывать из соответствующих полей.

Сравним два варианта получения значения атрибута. Возьмём элемент и считаем его атрибуты:

        
          
          <div data-color="red" hidden>Ошибка!</div>
          <div data-color="red" hidden>Ошибка!</div>

        
          
          const element = document.querySelector('div')console.log(element.hidden)// trueconsole.log(element.getAttribute('hidden'))// "" – пустая строка, т.к строкового значения у атрибута нетconsole.log(element.dataset.color)// "red"console.log(element.getAttribute('data-color'))// "red"
          const element = document.querySelector('div')

console.log(element.hidden)
// true
console.log(element.getAttribute('hidden'))
// "" – пустая строка, т.к строкового значения у атрибута нет

console.log(element.dataset.color)
// "red"
console.log(element.getAttribute('data-color'))
// "red"