docs.rodeo

MDN Web Docs mirror

Attribute

{{GlossarySidebar}} 

An attribute extends an {{Glossary("HTML")}}  or {{Glossary("XML")}}  {{Glossary("element")}} , changing its behavior or providing metadata.

An attribute always has the form name="value" (the attribute’s identifier followed by its associated value). You may see attributes without an equals sign or a value. That is a shorthand for providing the empty string in HTML. However, this is not valid in XML: XML requires all attributes to have an explicit value.

A number of HTML attributes are {{Glossary("Boolean/HTML", "boolean attributes")}} . These attributes’ values are only controlled by the presence or absence of the attribute. See {{Glossary("Boolean/HTML", "boolean attributes")}}  for more information.

Reflection of an attribute

Attributes may be reflected into a particular property of the specific interface. It means that the value of the attribute can be read by accessing the property, and can be modified by setting the property to a different value.

For example, the placeholder below is reflected into {{domxref("HTMLInputElement.placeholder")}} .

Considering the following HTML:

<input placeholder="Original placeholder" />

We can check the reflection between {{domxref("HTMLInputElement.placeholder")}}  and the attribute using:

const input = document.querySelector("input");
const attr = input.getAttributeNode("placeholder");
console.log(attr.value);
console.log(input.placeholder); // Prints the same value as `attr.value`

// Changing placeholder value will also change the value of the reflected attribute.
input.placeholder = "Modified placeholder";
console.log(attr.value); // Prints `Modified placeholder`

See also

In this article

View on MDN