.getAttribute()

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

console.log(scriptElement.getAttribute('type'))
// 'application/json'

console.log(scriptElement.getAttribute('id'))
// 'hydration'

console.log(scriptElement.getAttribute('class'))
// null

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Не все атрибуты имеет смысл считывать с помощью getAttribute(). Например, атрибут hidden лучше читать из поля hidden DOM-элемента, а дата-атрибуты — из поля 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"

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать