Какой метод возвращает значение указанного атрибута элемента

Метод getAttribute

Метод getAttribute считывает значение заданного атрибута у тега.

Синтаксис

элемент.getAttribute(имя атрибута);

Пример

Давайте выведем содержимое атрибута value элемента:

let elem = document.querySelector(‘#elem’); let value = elem.getAttribute(‘value’); console.log(value);

Результат выполнения кода:

Смотрите также

метод setAttribute ,
который записывает атрибуты
метод removeAttribute ,
который удаляет атрибуты
метод hasAttribute ,
который проверяет атрибуты

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр

Разница между getAttribute и свойствами объекта Element

Воспользуйтесь getAttribute() , чтобы получить исходное значение атрибута, указанное в HTML. Если же необходим доступ к текущему состоянию элемента, обратитесь непосредственно к его свойству. В том случае, когда вы работаете со статическими или неизменяемыми атрибутами, лучше использовать getAttribute() , в случае же с динамическими или изменяемыми атрибутами — к свойству объекта Element.

Скопировать код

Атрибуты и свойства представляют собой первоначальное и текущее состояние элемента соответственно.

Выбор между свойствами и getAttribute

Свойства: спутники реального времени

Свойства отражают текущее состояние элемента и являются идеальным выбором для работы с динамическими данными. Например, element.checked для checkbox мгновенно отображает действия пользователя.

Синхронизация: без лишних затруднений

Изменение свойства элемента, например element.id , приводит к обновлению атрибута, но обратное не верно. Связь здесь односторонняя.

Соответствие стандартам

При работе с пользовательскими и data-атрибутами используйте getAttribute() , поскольку они не стандартизированы в DOM. Избегание нестандартных атрибутов также гарантирует валидность HTML.

Зависимость от браузера и производительность

Раньше были различия в производительности обработки атрибутов в разных браузерах, но современные браузеры сгладили эти различия.

Когда предпочтительнее использовать getAttribute

Получение исходных значений и свойств

使用уйте getAttribute() , чтобы получить исходное значение или при работе с пользовательскими атрибутами. Этот метод возвращает точную информацию, как в HTML.

Булевые атрибуты

С булевыми атрибутами легче работать через свойства, поскольку getAttribute() возвращает строковое представление «true»/»false», в отличие от булевых значений.

Поля форм и стратегия сброса

getAttribute() позволяет извлечь значения по умолчанию в формах, что может пригодиться для сброса формы к её исходному состоянию без необходимости перезагружать страницу.

Обработка ссылок и URL

Свойство element.href выдаёт полный URL, в то время как getAttribute(‘href’) — значение из HTML, которое может быть как относительным, так и абсолютным.

Визуализация

Можно представить, что ваш дом — это HTML-элемент:

Используя getAttribute(‘color’) : �� – получаем цвет, указанный в первоначальном проекте.

При обращении к element.color : �� – наблюдаем последние изменения цвета двери.

getAttribute() выдаёт начальное значение, в то время как свойство отражает текущее состояние.

Скопировать код

| Доступ | Исходное значение | Текущее значение | | ------------------------- | ----------------------------- | -------------------------- | | `getAttribute('color')` | �� Проект при строительстве | �� Не изменяется | | `element.color` | �� Последняя покраска | �� Может изменяться |

От кода к реальному миру

Оптимизации DOM и JavaScript движка

Благодаря оптимизациям в современных движках JavaScript, доступ к свойствам стал быстрее. Так что в случаях, когда нужно обращаться к производительности и работе со стандартными атрибутами, выбирайте свойства.

Задание значений: отображение в HTML

Подумайте, нужно ли вам, чтобы изменение свойства отображалось в HTML. Прямое задание свойства, как element.value , меняет только свойство, в то время как setAttribute(‘value’, ‘new’) изменяет как атрибут, так и свойство.

Размер изображений: загруженные и исходные

img.width показывает размеры изображения после его рендеринга, в то время как getAttribute(‘width’) вернет изначальные значения, заданные в HTML.

Регистрозависимость: важное замечание

JavaScript требует строгого соблюдения регистра, в отличие от HTML. Поэтому, несмотря на функциональную идентичность getAttribute(‘VALUE’) и getAttribute(‘value’) , придерживайтесь в JavaScript использования строчных букв для избежания путаницы и для поддержания целостности кода.

JavaScript метод Element.getAttributeNames()

JavaScript метод getAttributeNames() объекта Element позволяет возвратить имена всех атрибутов элемента в виде массива строк. Если элемент не имеет атрибутов, он возвращает пустой массив.

Обращаю Ваше внимание на то, что использование getAttributeNames() вместе с методом getAttribute(), который возвращает значение указанного атрибута элемента, является эффективным с точки зрения производительности и служит альтернативой свойству Element .attributes.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
getAttributeNames()	61.0	45.0	48.0	10.0	Нет	18.0

JavaScript синтаксис:

let attributeNames = element.getAttributeNames();

Версия JavaScript

Document Object Model (DOM)

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

   Использование JavaScript метода .getAttributeNames() и getAttribute() onclick = "myFunc()" class = "myButton" name = "active-button" value = "100" data-val = "123">Нажми меня class = "info">
 function myFunc()  const btn = document.querySelector("button"), // находим первый элемент в документе info = document.querySelector(".info"); // находим первый элемент с классом info let attributeNames = btn.getAttributeNames(); // возвращаем имена всех атрибутов элемента в виде массива строк  for( let name of attributeNames) // проходим циклом по всем элементам массива let val = btn.getAttribute(name); // получаем значение указанного атрибута элемента info.innerHTML += "Имя атрибута: " + name + " . Значение атрибута: " + val + "
 "; // добавляем новое содержимое элементу > >

Результат нашего примера:

Пример использования JavaScript метода .getAttributeNames() и getAttribute()

JavaScript Element

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.