Revision 1063522 of Attr

<div>{{APIRef("DOM")}}</div>

<p>This type represents a DOM element's attribute as an object. In most DOM methods, you will probably directly retrieve the attribute as a string (e.g., {{domxref("Element.getAttribute()")}}, but certain functions (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating give <code>Attr</code> types.</p>

<p>{{InheritanceDiagram}}</p>

<div class="warning"><strong>Warning:</strong> In DOM Core 1, 2 and 3, <code>Attr</code> inherited from {{domxref("Node")}}. This is no longer the case in <a class="external" href="https://www.w3.org/TR/dom/">DOM4</a>. In order to bring the implementation of <code>Attr</code> up to specification, work is underway to change it to no longer inherit from {{domxref("Node")}}. You should not be using any {{domxref("Node")}} properties or methods on <code>Attr</code> objects.<br />
Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the ones that are going to be removed output warning messages to the console. You should revise your code accordingly. See <a href="#Deprecated_properties_and_methods">Deprecated properties and methods</a> for a complete list.</div>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
 <dd>The attribute's name.</dd>
 <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
 <dd>A {{domxref("DOMString")}} representing the namespace URI of the attribute, or <code>null</code> if there is no namespace.</dd>
 <dt>{{domxref("Attr.localName", "localname")}} {{readOnlyInline}}</dt>
 <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.</dd>
 <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
 <dd>A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or <code>null</code> if no prefix is specified.</dd>
 <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
 <dd>This property always returns <code>true</code>. Originally, it returned <code>true </code>if the attribute was explicitly specified in the source code or by a script, and <code>false</code> if its value came from the default one defined in the document's <acronym title="Document Type Definition">DTD</acronym>.</dd>
 <dt>{{domxref("Attr.value", "value")}}</dt>
 <dd>The attribute's value.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{domxref("Node")}} interface. In DOM4 they were moved to <code>Attr</code>.</p>

<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
</div>

<h2 id="Deprecated_properties_and_methods">Deprecated properties and methods</h2>

<p>The following properties have been deprecated. Where available, the appropriate replacement is provided.</p>

<dl>
 <dt><code>attributes</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>childNodes</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>firstChild</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>isId</code> {{readOnlyInline}}</dt>
 <dd>Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a {{Glossary("DTD")}} or other schema description.</dd>
 <dt><code>lastChild</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>nextSibling</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>nodeName</code></dt>
 <dd>Use {{domxref("Attr.name")}} instead.</dd>
 <dt><code>nodeType</code></dt>
 <dd>This property now always returns 2 (<code>ATTRIBUTE_NODE</code>).</dd>
 <dt><code>nodeValue</code></dt>
 <dd>Use {{domxref("Attr.value")}} instead.</dd>
 <dt><code>ownerDocument</code></dt>
 <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd>
 <dt><code>ownerElement</code>&nbsp;{{deprecated_inline("7.0")}} {{obsolete_inline("29.0")}} {{readOnlyInline}}</dt>
 <dd>Since you get an <code>Attr</code> object from an {{domxref("Element")}}, you should already know the associated element.</dd>
 <dd>Contrary to above claim, {{domxref("Document.evaluate")}} can return <code>Attr</code> objects from an XPath, in which case you would not easily know the owner.</dd>
 <dt><code>parentNode</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>previousSibling</code></dt>
 <dd>This property now always returns <code>NULL</code>.</dd>
 <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
 <dd>The type information associated with this attribute. While the type information contained in this attribute is guaranteed to be correct after loading the document or invoking {{domxref("Document.normalizeDocument")}}, this property may not be reliable if the node was moved.</dd>
 <dt><code>specified</code></dt>
 <dd>This property now always returns <code>true</code>.</dd>
 <dt><code>textContent</code></dt>
 <dd>Use {{domxref("Attr.value")}} instead.</dd>
</dl>

<p>The following methods have been deprecated:</p>

<dl>
 <dt><code>appendChild()</code></dt>
 <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
 <dt><code>cloneNode()</code></dt>
 <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd>
 <dt><code>createAttribute()</code></dt>
 <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd>
 <dt><code>createAttributeNS()</code></dt>
 <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd>
 <dt><code>getAttributeNode()</code></dt>
 <dd>Use {{domxref("Element.getAttribute()")}} instead.</dd>
 <dt><code>getAttributeNodeNS()</code></dt>
 <dd>Use {{domxref("Element.getAttributeNS()")}} instead.</dd>
 <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
 <dd>This method now always returns false.</dd>
 <dt><code>hasChildNodes()</code></dt>
 <dd>This method now always returns false.</dd>
 <dt><code>insertBefore()</code></dt>
 <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
 <dt><code>isSupported()</code></dt>
 <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd>
 <dt><code>isEqualNode()</code></dt>
 <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd>
 <dt><code>normalize()</code></dt>
 <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd>
 <dt><code>removeAttributeNode()</code></dt>
 <dd>Use {{domxref("Element.removeAttribute()")}} instead.</dd>
 <dt><code>removeChild()</code></dt>
 <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
 <dt><code>replaceChild()</code></dt>
 <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd>
 <dt><code>setAttributeNode()</code></dt>
 <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd>
 <dt><code>setAttributeNodeNS()</code></dt>
 <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd>
</dl>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Moved <code>namespaceURI</code>, <code>prefix</code> and <code>localName</code> from {{domxref("Node")}} to this API and removed <code>ownerElement</code>, <code>schemaTypeInfo</code> and <code>isId</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
   <td>{{Spec2("DOM3 Core")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

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

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] As of Chrome 45, this property no longer inherits from Node.</p>