Processing Attributes

An attribute is markup text (value="draft"); a property is a field on the element object. Many properties reflect attributes, but form controls split them: input.value is the current value, while the attribute (mirrored by defaultValue) keeps the original.

const p = document.querySelector('p');                  // <p>About attributes</p>
console.log(p.hasAttributes(), p.toggleAttribute('hidden'), p.getAttribute('id'));
p.setAttribute('data-state', 'new');
console.log(JSON.stringify(p.getAttributeNames()), p.dataset.state);
const input = document.querySelector('input');          // <input value="draft">
input.value = 'edited';
console.log(input.getAttribute('value'), input.value, input.defaultValue);

false true null
["hidden","data-state"] new
draft edited draft

toggleAttribute(name, force) returns whether the attribute is present afterward, ideal for hidden, disabled and inert. element.attributes is a live, unordered NamedNodeMap of Attr objects; getAttributeNames() is the lighter way to enumerate.