← Back

PROPERTIES AND ATTRIBUTES IN THE DOM

This note explains properties and attributes in simple language.

When JavaScript works with HTML elements, it often uses two related ideas:

They are connected, but they are not exactly the same. This topic is important because it helps you understand how JavaScript reads and changes elements on a page.

1. What happens after the DOM is built?

When the browser builds the DOM tree, many standard HTML attributes become properties of DOM objects.

That means an HTML element is not just markup anymore. In JavaScript, it becomes an object with properties and methods.

Example HTML

<a class="link" href="https://nikitagoluban.eu">Nikita Goluban</a>

Example JavaScript

const link = document.querySelector(".link");
console.log(link.href); // "https://nikitagoluban.eu"

Explanation

Here:

Diagram 1. HTML element becomes a DOM object

HTML:
<a class="link" href="https://nikitagoluban.eu">Nikita Goluban</a>

DOM object:
link
|
+-- href
+-- classList
+-- textContent
`-- many other properties

2. Reading and changing properties

A property can usually be read and changed directly in JavaScript.

Example

const link = document.querySelector(".link");

console.log(link.href); // "https://nikitagoluban.eu"

link.href = "https://nikita-goluban.com";

console.log(link.href); // "https://nikita-goluban.com"

Explanation

This changes the value while the script is running, and the value inside the DOM also changes.

Diagram 2. Changing a property

Before:
link.href = "https://nikitagoluban.eu"

JavaScript changes it
|
v

After:
link.href = "https://nikita-goluban.com"

3. The textContent property

The textContent property returns all text inside an element, including text inside nested elements.

Example HTML

<p class="text">Username: <span class="sub-text">Aaron</span></p>

Example JavaScript

const el = document.querySelector(".text");
const nested = document.querySelector(".sub-text");

console.log(el.textContent); // "Username: Aaron"
console.log(nested.textContent); // "Aaron"

Explanation

Diagram 3. textContent

<p class="text">
  Username:
  <span class="sub-text">Aaron</span>
</p>

el.textContent
|
v
"Username: Aaron"

nested.textContent
|
v
"Aaron"

4. Changing textContent

textContent can also be changed.

Example

const el = document.querySelector(".text");

console.log(el.textContent); // "Username: Aaron"

el.textContent = "Username: Benjamin";

Explanation

Whatever you assign to textContent, it will be written as text.

Diagram 4. Changing text

Before:
"Username: Aaron"

Set:
el.textContent = "Username: Benjamin"

After:
"Username: Benjamin"

5. The classList property

classList is a JavaScript property that lets you read, add, remove, toggle, check, and replace CSS classes on an HTML element.

It gives JavaScript access to the class names written in the element's class attribute.

Important idea: classList does not directly change the CSS code. It changes the class names on the HTML element. Then the CSS rules connected to those classes start working.

classList returns a special object called DOMTokenList. It is similar to an array, but it is not a normal JavaScript array. It also has:

Example HTML

<p id="text" class="red big">Hello</p>

Example JavaScript

const paragraph = document.getElementById("text");
console.log(paragraph.classList);

Possible output

DOMTokenList(2) ["red", "big"]

Explanation

The browser shows a DOMTokenList object. It contains the element's classes: red and big.

Diagram 5. classList

class="red big"

classList
|
+-- "red"
+-- "big"
+-- length: 2
`-- value: "red big"

6. Simple classList example

Imagine that CSS already has a class named red:

.red {
  color: red;
}

HTML

<button id="btn">Change color</button>
<p id="text">Hello</p>

JavaScript

const button = document.getElementById("btn");
const text = document.getElementById("text");

button.addEventListener("click", function () {
  text.classList.add("red");
});

Result

Before:
<p id="text">Hello</p>

After click:
<p id="text" class="red">Hello</p>

Explanation

When the button is clicked, JavaScript adds the class red to the paragraph. The CSS rule for .red then makes the text red.

7. classList.contains()

This method checks whether a class exists on the element.

Example

const hasBigClass = paragraph.classList.contains("big"); // true
const hasHiddenClass = paragraph.classList.contains("hidden"); // false

Explanation

The class name is passed as a string without the dot.

Diagram 6. contains()

paragraph.classList.contains("big")
|
v
true

paragraph.classList.contains("hidden")
|
v
false

8. classList.add()

This method adds a class to the element.

Example

paragraph.classList.add("bold");

Result

Before:
"red big"

After:
"red big bold"

You can also add several classes at once by passing several arguments.

9. classList.remove()

This method removes a class from the element.

Example

paragraph.classList.remove("red");

Result

Before:
"red big bold"

After:
"big bold"

If the class does not exist, nothing breaks and no error happens.

10. classList.toggle()

This method works like a switch:

Example

paragraph.classList.toggle("hidden");

Diagram 7. toggle()

If class is missing
|
v
add it

If class exists
|
v
remove it

Explanation

This is very useful for things like:

Common example

button.addEventListener("click", function () {
  menu.classList.toggle("open");
});

11. classList.replace()

This method replaces one class with another.

Example

paragraph.classList.replace("bold", "italic");

Result

Before:
"big bold"

After:
"big italic"

If the old class does not exist, nothing changes.

12. The style property

The style property is used for reading and changing inline styles of a DOM element.

It does not return all CSS rules from stylesheets. It only works with inline styles of that element.

Example

const button = document.querySelector(".btn");

button.style.backgroundColor = "teal";
button.style.fontSize = "24px";
button.style.textAlign = "center";

Important rule

In JavaScript, style property names use camelCase.

So:

Diagram 8. CSS name vs JavaScript style name

CSS:
background-color

JavaScript:
backgroundColor

Explanation

This is a very common beginner detail to remember.

13. When style is used

In practice, styling is usually done with CSS classes.

The style property is most useful for dynamic styles, for example when a value comes from the backend or is only known while the program is running.

14. Accessing attributes

Properties and attributes are connected, but attributes are accessed with special methods.

These methods work with the value written in the HTML markup.

Example HTML

<img class="image" src="https://picsum.photos/id/15/320/240" alt="Rocks and waterfall" width="300" />

15. hasAttribute()

This method checks whether an element has a given attribute.

Example

const image = document.querySelector(".image");

console.log(image.hasAttribute("src")); // true
console.log(image.hasAttribute("href")); // false

Explanation

It returns true or false.

Diagram 9. hasAttribute()

image.hasAttribute("src")
|
v
true

image.hasAttribute("href")
|
v
false

16. getAttribute()

This method returns the value of an attribute.

Example

console.log(image.getAttribute("alt")); // "Rocks and waterfall"

If the attribute does not exist, it returns null.

17. setAttribute()

This method sets or changes an attribute value.

Example

image.setAttribute("alt", "Amazing nature");
console.log(image.getAttribute("alt")); // "Amazing nature"

Explanation

This is useful when you want to update the attribute exactly as an HTML attribute.

18. removeAttribute()

This method removes an attribute from the element.

Example

image.removeAttribute("alt");
console.log(image.hasAttribute("alt")); // false

If the attribute does not exist, nothing breaks.

Diagram 10. Attribute methods

hasAttribute(name)        - true / false
getAttribute(name)        - value / null
setAttribute(name, value) - set or change
removeAttribute(name)     - remove

19. Property vs attribute

Some element values can be read directly as DOM properties, and that often needs less code.

Example

console.log(image.alt);

But for checking whether an attribute exists, or for removing it, the attribute methods are usually more convenient.

Diagram 11. Property vs attribute methods

Property access
|
v
shorter and convenient for reading/changing

Attribute methods
|
v
better for checking, getting, setting, removing attributes

20. Custom attributes

Sometimes the standard HTML attributes are not enough.

In that case, HTML supports custom data- attributes. These allow us to store extra information directly on an element.

Example HTML

<button type="button" data-action="save">Save text</button>
<button type="button" data-action="close">Close editor</button>

21. Reading data- attributes with dataset

To get the value of a data- attribute, use the dataset property.

After dataset., write the attribute name without data-.

Example

const saveBtn = document.querySelector('button[data-action="save"]');
console.log(saveBtn.dataset.action); // "save"

const closeBtn = document.querySelector('button[data-action="close"]');
console.log(closeBtn.dataset.action); // "close"

Diagram 12. data- attribute to dataset

HTML:
data-action="save"

JavaScript:
element.dataset.action
|
v
"save"

Explanation

This is a very important transformation:

22. Changing dataset values

You can also change an existing custom attribute or add a new one through dataset.

Example

saveBtn.dataset.action = "update";
saveBtn.dataset.role = "admin";

console.log(saveBtn.dataset.action); // "update"
console.log(saveBtn.dataset.role); // "admin"

Explanation

Now:

Diagram 13. Changing custom data

Before:
data-action="save"

JavaScript:
saveBtn.dataset.action = "update"

After:
data-action="update"

23. Easy memory rules

textContent = all text inside an element
classList = work with classes
style = work with inline styles
hasAttribute() = check
getAttribute() = read
setAttribute() = create or change
removeAttribute() = remove
dataset = work with data- attributes

24. Quick summary

25. Final conclusion

If you understand these ideas:

properties
textContent
classList
style
attributes
dataset

then you already have a strong foundation for working with real DOM elements in JavaScript.

This topic is very important because almost every interactive webpage uses these tools.

← Back