---
title: Element.attributes
slug: Web/API/Element/attributes
translation_of: Web/API/Element/attributes
---
<p>{{ APIRef("DOM") }}</p>

<p>Свойство <strong><code>Element.attributes</code></strong> возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, то есть полученные данные не являются массивом <code>Array</code>, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты <font face="Courier New, Andale Mono, monospace"><strong>(</strong></font><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">attributes</strong><font face="Courier New, Andale Mono, monospace"><strong>)</strong></font> это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
</pre>

<h2 id="Example" name="Example">Пример</h2>

<h3 id="Базовые_примеры">Базовые примеры</h3>

<pre class="brush: js">// Получить первый элемент &lt;p&gt; содержащийся в документе
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;</pre>

<h3 id="Notes" name="Notes">Перечисление атрибутов элементов</h3>

<p>Числовое индексирование полезно для прохождения всех атрибутов элемента.<br>
 Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. </p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;

&lt;html&gt;

 &lt;head&gt;
  &lt;title&gt;Attributes example&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
   function listAttributes() {
     var paragraph = document.getElementById("paragraph");
     var result = document.getElementById("result");

     // Во-первых,  давайте убедимся, что в абзаце есть какие-то атрибуты
     if (paragraph.hasAttributes()) {
       var attrs = paragraph.attributes;
       var output = "";
       for(var i = attrs.length - 1; i &gt;= 0; i--) {
         output += attrs[i].name + "-&gt;" + attrs[i].value;
       }
       result.value = output;
     } else {
       result.value = "No attributes to show";
     }
   }
  &lt;/script&gt;
 &lt;/head&gt;

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

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>No change from {{SpecName('DOM2 Core')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>No change from {{SpecName('DOM1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("api.Element.attributes")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("NamedNodeMap")}}, the interface of the returned object</li>
 <li>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
</ul>