Элемент: свойство attributes

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство Element.attributes возвращает живую коллекцию всех узлов атрибутов, зарегистрированных для указанного узла. Это NamedNodeMap, а не Array, поэтому у него нет методов Array, а индексы узлов Attr могут различаться в разных браузерах. Более конкретно, attributes представляет собой пару "ключ-значение" строк, которая содержит информацию об атрибуте.

Значение

Объект NamedNodeMap.

Примеры

Основные примеры

// Get the first <p> element in the document
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;

Перечисление атрибутов элементов

Вы можете перечислять атрибуты элемента с помощью for...of. Следующий пример проходит по узлам атрибутов для элемента в документе с id "paragraph" и выводит значение каждого атрибута.

<!doctype html>
<html lang="en-US">
  <head>
    <title>Attributes example</title>
    <script>
      function listAttributes() {
        const paragraph = document.getElementById("paragraph");
        const result = document.getElementById("result");

        // First, let's verify that the paragraph has some attributes
        if (paragraph.hasAttributes()) {
          let output = "Attributes of first paragraph:\n";
          for (const attr of paragraph.attributes) {
            output += `${attr.name} -> ${attr.value}\n`;
          }
          result.textContent = output;
        } else {
          result.textContent = "No attributes to show";
        }
      }
    </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input
          type="button"
          value="Show first attribute name and value"
          onclick="listAttributes();" />
      </p>
    </form>
    <pre id="result"></pre>
  </body>
</html>

Спецификации

Спецификация
DOM # dom-element-attributes

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`attributes`	1	12	1	8	1	18	4	10.1	1	1.0	4.4

См. также

NamedNodeMap, интерфейс возвращаемого объекта
Учитывание проблем совместимости с разными браузерами: на quirksmode

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes