How to Get and Modify Element‘s Attributes, Classes, and Styles through JavaScript

The Document Object Model (DOM) is a programming interface that allows JavaScript to access and manipulate elements and styles on a webpage. With the DOM, you can dynamically change an element‘s attributes, classes, styles and more in response to user input.

Having full control over the DOM unlocks immense possibilities for creating highly interactive web pages that update on the fly.

As a full-stack developer well-versed in JavaScript, understanding how to harness the power of the DOM is an indispensable skill for delivering engaging user experiences.

In this comprehensive 3,000+ word guide, you‘ll learn:

• How to select any element or groups of elements using JavaScript
• Techniques to modify an element‘s:
  • Styles
  • Classes
  • Attributes
  • And more
• Specific use cases where DOM manipulation shines
• How DOM access compares to CSS for updating styles
• Performance best practices when manipulating the DOM
• Browser support for these critical DOM methods

By the end, you‘ll have advanced techniques to create dynamic web pages that make full use of the DOM capabilities.

Let‘s get started!

Step 1: Selecting Elements in JavaScript

Before you can update an element, you first need to access it from the DOM. Here are some key methods to select elements:

getElementById()

The getElementById() method allows you to select a single element by its unique ID attribute.

const element = document.getElementById(‘main-heading‘);

This will return the one DOM element with id="main-heading", or null if no match exists.

getElementsByClassName()

The getElementsByClassName() method returns an array-like collection of all elements that share the same class name.

const elements = document.getElementsByClassName(‘article-preview‘);

Now you can iterate through all elements having the class="article-preview" attribute.

getElementsByTagName()

To select elements by their tag name, use getElementsByTagName(). This also returns a live collection of matching elements.

const headers = document.getElementsByTagName(‘h2‘);

This selects all <h2> elements on the page.

querySelector()

For more advanced queries, use document.querySelector() which accepts any CSS selector and returns the first matching element.

const element = document.querySelector(‘#main-heading‘);
const element = document.querySelector(‘.article-preview‘); 

This makes it easy to select an element using any combination of ID, class, attribute, type, position and more.

querySelectorAll()

To get all matches similar to getElementsByClassName(), use querySelectorAll():

const elements = document.querySelectorAll(‘p.details‘); 

This flexibility makes querySelectorAll() one of the most used methods for selecting groups of elements.

Note: Only getElementById(), querySelector(), and querySelectorAll() are supported in all browsers, while the getElement*() methods have inconsistent support. Over 97% of global users are however on browsers with full support.

Now let‘s explore powerful techniques to manipulate selected elements…

Step 2: Modifying an Element‘s Style

Controlling the style of elements allows you to completely transform the look, layout, and feel of your webpages.

Here‘s how it works:

Every DOM element has a .style property that‘s an object containing all possible style attributes.

For example, to change the text color of an element:

const myElement = document.getElementById(‘title‘);
myElement.style.color = ‘blue‘;  

By modifying .style you override any CSS rules defined elsewhere. Some common use cases:

// Change font size
myElement.style.fontSize = ‘2em‘;   

// Set background color
myElement.style.backgroundColor = ‘red‘;

// Make button looks clicked
button.style.opacity = 0.5; 

And many more styles can be set in this manner.

Important: Use camelCase for Style Properties

Style properties use camelCasing, not hyphens:

✅ fontSize
❌ font-size

This can trip up many developers on first attempts!

When to Use Inline Styles

Direct DOM style manipulation creates inline CSS on an element.

The main benefit of inline styles is they override any other CSS rules, due to having the highest specificity.

This ensures your JavaScript changes are applied predictably, regardless of external factors.

Use cases for inline styles:

• Dynamically changing styles based on user actions
• Animations and transitions
  -Highlighting or emphasizing elements
• Overriding CSS framework defaults

So reserve direct .style changes for dynamic UI updates only. For most static styling, keep using external CSS files.

Step 3: Toggling CSS Classes with JavaScript

Along with styles, classes allow you to reuse sets of rules defined in stylesheets.

Here‘s how to toggle classes at runtime:

element.classList

Every DOM element has a .classList property with these useful methods:

// Add class
element.classList.add(‘new-class‘);

// Remove class 
element.classList.remove(‘new-class‘);  

// Toggle class
element.classList.toggle(‘new-class‘);   

For example:

// Add "active" styling when clicking tab buttons
tabButton.addEventListener(‘click‘, e => {
  e.target.classList.add(‘active‘);
})  

Other examples of using .classList:

// Mark completed todos 
todo.classList.add(‘completed‘);

// Disable buttons  
button.classList.add(‘disabled‘); 

// Show mobile navigation menu 
nav.classList.toggle(‘mobile-active‘);

Check if a Class Already Exists

You can check if an element already contains a class:

element.classList.contains(‘highlight‘); 

Which returns a boolean true / false.

For example:

function highlightHeadlines() {

  const headlines = document.querySelectorAll(‘h2‘);

  headlines.forEach(headline => {

    if(!headline.contains(‘highlighted‘)) {
      headline.classList.add(‘highlighted‘);
    }

  });

}

This adds the "highlighted" class only if not already set.

Benefits of Using Classes:

• Improved readability over using .style
• Reusable class-based rules
• Centralized management in stylesheets
• Easier collaboration between devs

So reach for .classList whenever possible.

Step 4: Modifying Attributes

Attributes provide further information about an element, separate from styling.

Examples like id, src, href, and alt that appear in HTML code.

Here‘s how to update attributes dynamically:

Modify Attributes Directly

You can get and set common attributes directly:

// Get attribute  
const name = input.name;

// Set attribute
input.name = ‘username‘;

Works well for:

• id
• src
• href
• Other common strings

setAttribute()

For maximum flexibility setting any attribute, use element.setAttribute().

Syntax:

element.setAttribute(name, value);

Example setting different attributes:

// Set class attribute
menu.setAttribute(‘class‘, ‘main-nav‘);  

// Add custom ‘open‘ attribute  
panel.setAttribute(‘open‘, ‘‘); 

// Update image source
img.setAttribute(‘src‘, newImage);

You can even add custom data attributes:

user.setAttribute(‘data-id‘, userId);

And set event handlers:

panel.setAttribute(‘onclick‘, ‘toggleOpen()‘);  

Notes:

• Prefer .classList over setAttribute() for classes
• Use camelCase names like tabindex not tabIndex
• Attributes vs. properties have [notable differences](https://stack overflow.com/questions/6003819)

Use Cases for Modifying Attributes

Some examples where you may need to update attributes:

• Switch an image or icon source on hover or state change
• Dynamically set unique IDs and data attributes as DOM elements get created or recycle
• Change destination links based on context
• Attach or remove event handlers like onclick

Step 5: Comparing Style & Class Changes: Which to Use?

We‘ve covered setting styles directly and toggling class names. But when should you use each approach?

Here is the general guidance…

Use Inline Styles (.style) For:

• Dynamic instant changes (animations, transitions)
• Temporary UI highlights or emphasis
• Overriding existing CSS

Use Classes (.classList) For:

• Reusable UI states (active, open, disabled)
• Semantic naming for improved readability
• Consistent styling tied to stylesheets

Keep these general guidelines in mind for clean and maintainable code.

Sometimes mixing both .style and .classList changes together works nicely for reusable yet dynamic styles!

Step 6: DOM Manipulation Performance Tips

Now that you have numerous options for updating elements, let‘s tackle performance best practices.

Misusing DOM APIs leads to slow, janky web apps. By contrast, optimized DOM scripting creates silky smooth animations and transitions!

Here are pro tips for efficiency:

1. Minimize DOM Lookups

Every DOM lookup with getElementById() or querySelector() has computational costs.

Reduce lookups by caching elements in variables:

// Bad: Lookup DOM twice per update  
function updateHeader() {

  document.getElementById(‘header‘).innerHTML = getHeaderText();  
  document.getElementById(‘header‘).classList.remove(‘loading‘);

}

// Good: Cache lookup
const header = document.getElementById(‘header‘); 

function updateHeader() {

  header.innerHTML = getHeaderText();
  header.classList.remove(‘loading‘);  

}

Reusing a cached variable avoids wasted lookups.

2. Batch DOM Changes

Batch changes by working with DOM methods offscreen:

// Bad: DOM update per string 
for(let i = 0; i < 20; i++){

  container.innerHTML += ‘<div>‘ + i + ‘</div>‘;

}

// Good: Batch into DocumentFragment
const fragment = document.createDocumentFragment();

for(let i = 0; i < 20; i++){

  const div = document.createElement(‘div‘);
  div.textContent = i;  

  fragment.appendChild(div);

}

container.appendChild(fragment);

Building a DOM fragment avoids costly reflows.

3. Avoid Forced Synchronous Layouts

Certain DOM reads trigger browser "reflow" to recompute layouts. Avoid with async timing:

// Bad: Forced synchronous layout here   
myElement.style.left = myElement.offsetLeft + 10 + ‘px‘;

// Good: Allow layout to complete before next read
myElement.style.transition = ‘left 2s‘;
myElement.style.left = ‘10px‘; 

setTimeout(() => {
  myElement.style.left = myElement.offsetLeft + 10 + ‘px‘;
}, 0); 

There are more gotchas triggering expensive reflows.

See HTML5Rocks for a deeper dive into DOM performance.

By reviewing community performance guides, you can fully optimize real-world applications.

Browser Support and Polyfills

As an experienced JavaScript engineer, you likely already assess browser support for newer APIs before putting them into production.

Here is the latest data on browser adoption levels for the DOM manipulation APIs highlighted in this guide:

API	Global Support
.getElementById	99.86%
.querySelector / .querySelectorAll	97.59%
.getElementsByClassName()	95.63%
.classList	93.11%

Source: CanIUse, as of March 2023

The main points of concern are older browsers like IE11 lacking support. But the majority of modern browsers have excellent compatibility.

For production sites needing 100% support, polyfills exist for .classList and other APIs. The popular Web Components polyfill project by Google engineers provides these fallbacks.

So if required, you can "fill missing functionality" to enable the latest APIs on dated browsers.

Putting It All Together

Let‘s see an practical example using DOM manipulation to create an interactive tabbed interface.

See this JS Fiddle demo showing the end result.

We‘ll build this functionality in steps:

HTML Structure

<button class="tab" data-tab="tab-1">Tab 1</button>

<div class="tab-content">
   <div class="tab-pane" id="tab-1">Tab 1 content</div>

   <div class="tab-pane" id="tab-2">Tab 2 content</div>

   <div class="tab-pane" id="tab-3">Tab 3 content</div>  
</div>

Tab Switching

• Select tab buttons
• Toggle .active class on click
• Get clicked tab‘s data-tab value

const tabs = document.querySelectorAll(‘.tab‘);

tabs.forEach(tab => {

  tab.addEventListener(‘click‘, switchTab);

});

function switchTab(event) {

  tabs.forEach(tab => tab.classList.remove(‘.active‘));

  event.target.classList.add(‘.active‘);

  const tabId = event.target.getAttribute(‘data-tab‘);

} 

Show Matched Content

• Hide all tab panes
• Show pane with same ID

  function switchTab(event) {

    //...

    // Hide all tab panes first
    const tabPanes = document.querySelectorAll(‘.tab-pane‘);
    tabPanes.forEach(pane => pane.classList.remove(‘active‘));

    // Find matching pane and show it
    const activePane = document.getElementById(tabId); 
    activePane.classList.add(‘active‘);

  }

And that‘s the complete implementation!

While basic, this demonstrates:

• Selecting groups of elements
• Toggling element classes
• Getting and comparing attributes
• Showing and hiding content areas

With these building blocks, entire site experiences can be created.

Conclusion

You now have advanced techniques for selecting and manipulating DOM elements using native browser APIs:

• Select single or groups of elements with:
  • getElementById/querySelector
  • getElementsByClassName/querySelectorAll
• Modify styles through the .style property
• Toggle classes by adding, removing and checking for them using .classList methods
• Update attributes directly or using setAttribute()

On top of the techniques, you have guidance on:

• Usecases where DOM access makes sense
• How it compares to styling through CSS
• Performance best practices to ensure snappy apps

With these JavaScript DOM scripting skills, you can create highly dynamic and interactive web experiences that harness the full power of the browser.

The key is knowing how to directly tap into the lower-level DOM access without abstractions.

So apply these techniques to take control over the Document Object Model in your next web project!