getAttribute
Reads the raw attribute value.
Platform under construction
Attributes & Properties
Attributes live in HTML. Properties live on DOM objects. They often mirror each other, but they are not the same thing.
button.disabled = true;
button.setAttribute("aria-busy", "true");
const url = link.href;
DOM & HTML Interaction
Use properties for live state and attributes for markup-level meaning.
An attribute is what appears in HTML, such as href, alt, aria-label or data-state. A property is the JavaScript object value, such as element.href or input.checked.
Some properties reflect attributes. Others represent live state that may differ from the original markup.
Boolean states such as disabled, checked and hidden are usually clearer as properties in JavaScript.
setAttribute
Writes an attribute string.
Property access
Reads or writes live DOM object state.
Boolean properties
Use true or false for disabled, checked and hidden.
Examples
DOM code should be scoped, safe and visible in the interface.
Use the right API for the right kind of state
button.disabled = true;
button.setAttribute("aria-busy", "true");
status.textContent = "Saving...";
Treating all attributes as strings
button.setAttribute("disabled", "false");
// The disabled attribute still disables the button.
Code patterns
Reusable examples for quick reference.
These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.
Read raw attribute
Useful for custom attributes and source markup.
const label = button.getAttribute("aria-label");
Set ARIA state
ARIA attributes are string attributes.
button.setAttribute("aria-expanded", "true");
Use boolean property
disabled is clearer as a property.
submitButton.disabled = formIsInvalid;
Read resolved property
href property returns a resolved URL.
console.log(link.href);
Rules that matter
Keep the DOM predictable.
DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.
Use properties for boolean state
disabled = false is clear and correct.
Use attributes for ARIA
ARIA states are represented as attribute strings.
Know resolved values
link.href may differ from the raw href attribute.
Keep data attributes simple
Use dataset for custom strings, not complex objects.
Do not fake disabled state
A styled disabled button should also be disabled in the DOM.
Preserve semantics
Attributes often communicate meaning to assistive technology.
Production thinking
A good DOM layer connects behavior to HTML without making the page fragile.
Why does this matter?
Confusing attributes and properties creates UI states that look correct but behave incorrectly.
Accessibility
ARIA attributes, disabled state and labels must be updated together with visual changes.
Production note
Production components should have one clear source of truth for DOM state.
SEO note
Attributes such as href, alt and structured-data scripts affect how content is discovered and understood.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add disabled state after the first click.
- Read aria-pressed before and after the click.
- Add a data-state attribute and update it too.
Practice assignment
Do this before moving to the next topic.
- Read one attribute.
- Set one ARIA attribute.
- Toggle one boolean property.
Try it yourself
Toggle attributes and properties
Self-check
Before you continue, prove that you understand Attributes & Properties.
If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.
- Can you explain attributes?
- Can you explain properties?
- Can you explain boolean attributes?
- Can you explain when setAttribute is appropriate?
- Can you explain why aria state should match visual state?
Senior audit upgrade
Extra production context for Attributes & Properties.
Safe DOM default
Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.
const item = document.createElement("li");
item.textContent = userInput;
list.replaceChildren(item);