Managing DOM Nodes — JS: DOM API

The largest part of the DOM API is concentrated in the properties of specific elements. In this lesson, we'll examine only the most basic properties, solely with the aim of showing the principles how they work. In everyday practice, programmers constantly refer to the documentation , to find out what properties and methods nodes have to manage them.

Attributes

Each tag in HTML has attributes. Some of them are common to all of them, others are specific to certain tags.

<a id="aboutPage" href="/pages/about" class="simple">About</a>

In the example above, the id and class attributes can be used with any tag. The href attribute only goes with some tags, such as the <a> tag.

Once the browser has loaded the HTML code, the DOM will be built based on it. During processing, each tag becomes a node, and its attributes become properties of this node. Usually, the names of the attributes and properties of nodes coincide with each other.

// <a id="aboutPage" href="/pages/about" class="simple">About</a>
const el = document.querySelector('#aboutPage');
el.id; // aboutPage
el.href; // https://hexlet.io/pages/about

There are exceptions, for example, the class attribute corresponds to the className property. In order to be able to work with classes conveniently, there are a number of additional ways of working with them. This is needed because there can be any number of classes, and they are set by a regular text string. Accordingly, if you need to change this list, then you'll have to work with strings, which is incredibly inconvenient. And here's how you can do it using a DOM tree:

// A tag with this id has the string "simple"
const el = document.querySelector('#aboutPage');
el.classList.add('page');
el.classList.remove('simple');
// After all changes have been made
el.className; // page

Additional methods:

• el.classList.contains("class") – checks whether the element contains the required class. Returns true/false.
• el.classList.toggle("class") – if there is a class, removes it, and vice versa.

Naming is not the only difference between attributes and properties. There are many more differences, and they're not always obvious. Here are just a few of them:

1. An attribute is always a string, but properties can be other things. For example:

   <textarea rows="5"></textarea>
   

   The value of the rows property of the corresponding element in the DOM tree will be a number.

2. Attributes are not case-sensitive

   <a Id="aboutPage" hrEf="/pages/about" CLASS="simple">About</a>
   

   It's best to be consistent, but at least knowing that it will work either way is useful.

3. The attribute is always present in HTML, so it is accessible via innerHTML. But many properties don't have corresponding attributes. For example, the <a> tag has a hash property, but there's no hash attribute.

As we saw above, attributes and properties are not the same. Therefore, there's a set of methods for managing attributes:

• el.hasAttribute(name) – checks the attribute exists
• el.getAttribute(name) – gets the value of an attribute
• el.setAttribute(name, value) – sets an attribute
• el.removeAttribute(name) – deletes an attribute
• el.attributes – list of html attributes

// The methods work with html attributes
el.getAttribute('class');

Note that they work with attributes (and their names), not properties. They make it possible to both extract them and change them. Understandably, you may want to know if the attribute will change if you change the property, and vice versa?

Essentially, synchronization is done like so: When the attribute changes, the property will be updated automatically. But there are exceptions. Despite all this, it doesn't mean you should try and work via attributes. On the contrary, whenever possible, always work with DOM tree properties, and use read-only attributes to get the state that was in the DOM at the time of initialization (HTML parsing).

<a id="aboutPage" href="/pages/about" class="simple">About</a>

const el = document.querySelector('#aboutPage');
el.setAttribute('class', 'page');
el.className; // page
el.getAttribute('class'); // page

Unlike properties, the attribute value always matches what we see in HTML, but properties are sometimes normalized:

<!-- At this moment, the browser is open on https://hexlet.io -->
<a id="link-to-courses" href="/courses">Courses</a>

const el = document.querySelector('#link-to-courses');
el.href; // https://hexlet.io/courses
el.getAttribute('href'); // /courses

Non-standard attributes never turn into properties of the corresponding DOM tree elements. E.g., if we add the href attribute to the p tag, it will be ignored. However, this doesn't mean we can't extract it using getAttribute.

To work with arbitrary properties, html has a special data-* attribute, where any word can stand in place of an asterisk.

<a href="#" data-toggle="tab">My projects</a>

These attributes are actively used in JavaScript plugins, and they allow you to not get tied up with classes. In DOM elements, they're accessible by a special property called dataset:

console.log(el.dataset.toggle); // => tab

Inside the dataset object, the name of each property is a string after data- in the attribute. If the name contains a hyphen, it gets deleted, and the letter after it becomes a capital letter:

<a href="#" data-nav-toggle="tab">My projects</a>

console.log(el.dataset.navToggle); // => tab

Features

The set of properties also changes depending on the type of element. Except, of course, those inherited from Node and Element.

You can refer to the specification to see a list of these properties. They're described in a special format that's easy to understand:

// HTMLLinkElement – Just the name of the interface
// HTMLElement – the parent type that properties and methods are inherited from
// attribute – designation of a specific attribute, and its type and name
interface HTMLLinkElement : HTMLElement {
  // The last word in each line is the name of the property in the object
  attribute USVString href;
  attribute DOMString? crossOrigin;
  attribute DOMString rel;
  attribute RequestDestination as; // (default "")
  readonly attribute DOMTokenList relList;
  attribute DOMString media;
  attribute DOMString nonce;
  attribute DOMString integrity;
  attribute DOMString hreflang;
  attribute DOMString type;
}

As with navigating DOM trees, there's no need to remember everything about how attributes and properties behave. You'll get a good idea by practicing and experimenting.

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.