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

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

Получение значения стандартного атрибута:

<input type='text' id='name' value='Иван'>

<script>
  const elem = document.getElementById('name');
  console.log(elem.getAttribute('value'));
</script>

Иван

Проверка наличия кастомного атрибута data-*:

<div id='product' data-price='1500' data-category='electronics'></div>

<script>
  const product = document.getElementById('product');
  console.log(product.getAttribute('data-category'));
</script>

electronics

Получение значения несуществующего атрибута:

<button id='btn'>Кнопка</button>

<script>
  const btn = document.getElementById('btn');
  console.log(btn.getAttribute('data-info'));
</script>

null

Работа с булевыми атрибутами:

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

<script>
  const checkbox = document.getElementById('agree');
  console.log(checkbox.getAttribute('checked'));
</script>

(пустая строка)

Похожие методы в JavaScript

dataset — свойство для работы с кастомными атрибутами data-*. Предоставляет доступ через объект с именами атрибутов в camelCase.

<div id='user' data-user-id='123'></div>
<script>
  console.log(document.getElementById('user').dataset.userId); // '123'
</script>

hasAttribute() — проверяет наличие атрибута у элемента, возвращает булево значение.

<div id='box' class='container'></div>
<script>
  const box = document.getElementById('box');
  console.log(box.hasAttribute('class')); // true
</script>

getAttributeNode() — возвращает узел атрибута (Attr), а не только его значение. Устаревший метод.

Рекомендации: для data-* атрибутов удобнее использовать dataset. Для проверки наличия атрибута — hasAttribute(). Для чтения значений остальных атрибутов — getAttribute().

Типичные ошибки

Путаница между свойством и атрибутом:

<input id='field' value='Изначально'>
<script>
  const field = document.getElementById('field');
  field.value = 'Новое';
  console.log(field.getAttribute('value')); // Изначально
  console.log(field.value); // Новое
</script>

Изначально
Новое

Атрибут остается в HTML, свойство отражает текущее состояние элемента.

Ожидание boolean для булевых атрибутов:

<button disabled>Неактивно</button>
<script>
  const btn = document.querySelector('button');
  if (btn.getAttribute('disabled') === true) { // Ошибка
    console.log('Кнопка отключена');
  }
</script>

Метод возвращает пустую строку, а не true. Правильная проверка: btn.hasAttribute('disabled').

Обращение к атрибуту без проверки на null:

<div id='elem'></div>
<script>
  const elem = document.getElementById('elem');
  const value = elem.getAttribute('data-info').toLowerCase(); // Ошибка
</script>

Если атрибут отсутствует, getAttribute возвращает null, и вызов toLowerCase() вызовет исключение.

Изменения в спецификации

Основное поведение метода getAttribute() остается стабильным в последних версиях JavaScript и DOM. Однако, с появлением стандарта DOM Living Standard, уточнены некоторые аспекты:

• Возвращаемое значение для несуществующих атрибутов явно определено как null (ранее в некоторых браузерах могла возвращаться пустая строка).
• Для кастомных data-* атрибутов рекомендуется использовать свойство dataset, но getAttribute() также остается рабочим.
• В современных браузерах метод корректно работает с SVG элементами и другими пространствами имен XML.

Существенных изменений в синтаксисе или основных возможностях метода не происходило.

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

Динамическое изменение стилей на основе атрибута:

<div data-theme='dark' id='app'>Приложение</div>
<script>
  const app = document.getElementById('app');
  if (app.getAttribute('data-theme') === 'dark') {
    app.style.backgroundColor = '#333';
    app.style.color = '#fff';
  }
</script>

Сбор данных со всех элементов определенного атрибута:

<li data-price='100'>Товар 1</li>
<li data-price='200'>Товар 2</li>
<li data-price='150'>Товар 3</li>
<script>
  const items = document.querySelectorAll('li[data-price]');
  const total = Array.from(items).reduce((sum, item) => {
    return sum + parseInt(item.getAttribute('data-price'));
  }, 0);
  console.log(total); // 450
</script>

Валидация форм через кастомные атрибуты:

<input type='text' 
       data-pattern='[A-Za-z]+' 
       data-error='Только буквы' 
       id='username'>
<script>
  const input = document.getElementById('username');
  input.addEventListener('blur', () => {
    const pattern = input.getAttribute('data-pattern');
    const regex = new RegExp(`^${pattern}$`);
    if (!regex.test(input.value)) {
      alert(input.getAttribute('data-error'));
    }
  });
</script>

Международзация через атрибуты:

<button data-i18n='button.submit'>Отправить</button>
<script>
  const translations = {
    'button.submit': 'Submit',
    'button.cancel': 'Cancel'
  };
  const button = document.querySelector('button');
  const key = button.getAttribute('data-i18n');
  if (translations[key]) {
    button.textContent = translations[key];
  }
</script>

Чтение нестандартных атрибутов у SVG:

<svg width='100' height='100'>
  <circle cx='50' cy='50' r='40' data-fill='custom' />
</svg>
<script>
  const circle = document.querySelector('circle');
  console.log(circle.getAttribute('data-fill')); // custom
</script>

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

PHP (DOMElement::getAttribute):

$dom = new DOMDocument();
$dom->loadHTML('<a href="/page">Ссылка</a>');
$a = $dom->getElementsByTagName('a')[0];
echo $a->getAttribute('href'); // /page

Python (BeautifulSoup get):

from bs4 import BeautifulSoup
html = '<img src="image.jpg" alt="Пример">'
soup = BeautifulSoup(html, 'html.parser')
img = soup.find('img')
print(img.get('alt'))  # Пример

C# (GetAttribute в Selenium):

IWebElement element = driver.FindElement(By.Id("myId"));
string value = element.GetAttribute("class");

Java (getAttribute в Selenium WebDriver):

WebElement element = driver.findElement(By.id("elem"));
String attrValue = element.getAttribute("title");

Отличия: в PHP и Python методы часто используются для парсинга HTML, а в JavaScript — для работы с живым DOM. Синтаксис в разных языках похож, но контекст использования различается.