Skip to main content

Properties and Attributes

When building a DOM tree, some standard HTML attributes become element properties. Let's take a look at a few commonly used properties.

  • value contains the current text content of form elements.
  • checked stores the state of a checkbox or radio button.
  • name stores the value specified in the name HTML attribute.
  • src is the path to the <img> tag’s image.

textContent property​

elem.textContent returns the text content inside the element. It is available for reading and writing. No matter what is passed to textContent, the data will always be written as text.

classList property​

The classList property stores an object with methods for work with the element’s classes.

  • elem.classList.contains(cls) returns true or false depending on whether the element has the cls class.
  • elem.classList.add(cls) adds the cls class to the list of the element’s classes.
  • elem.classList.remove(cls) removes the cls class from the list of the element’s classes.
  • elem.classList.toggle(cls) – if there is no cls class, it adds this class, otherwise it removes this class.
  • elem.classList.replace(oldClass, newClass) replaces the existing oldClass class with the specified newClass.

style property​

This is used to read and modify inline styles. It returns the CSSStyleDeclaration object that contains a list of all properties defined only in the inline styles of the element, and not all CSS. When writing, properties are written to camelCase, that is, background-color becomes element.style.backgroundColor, etc.

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

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

console.log(button.style); // inline styles object
Note

In practice, element styling is done by adding CSS classes. The style property is used to add some dynamic styles, for example, during animation.

Attributes​

DOM elements correspond to HTML tags that have text attributes. Attributes are accessed using standard methods. These methods deal with a value in HTML.

  • elem.hasAttribute(name) checks for the presence of an attribute, returns true or false.
  • elem.getAttribute(name) gets and returns the attribute value.
  • elem.setAttribute(name, value) sets an attribute.
  • elem.removeAttribute(name) removes an attribute.
  • elem.attributes is a property that returns an object of all attributes of the element.

Data attributes​

With them, you can add an arbitrary attribute to a tag and get its value in JavaScript. This option is used in order to simplify code writing, for example, to bind data and markup using a unique identifier, specify the type of button action, etc.

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

To get the value of data-attribute, the dataset property is used, followed by the attribute name. That is, data- is dropped out, and the rest of the name is written as the object property name.

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"