How to modify a class name using JavaScript

Other Questions JavaScript
1

I’m trying to change the class name from abcName to xyzName in my HTML. For example, I have the following table row:


    
        Bob

However, when I use this JavaScript code, it doesn’t appear to work upon the page loading:

var cells = document.getElementsByTagName("td");

function updateClass(oldClass, newClass, index) {
    try {
        if (cells[index].innerHTML.includes('>' + oldClass)) {
            cells[index].className = newClass;
        }
    } catch (error) {}
}

function modifyClasses() {
    for (let i = 0; i < cells.length; i++) {
        updateClass("Bob", "xyzName", i);
    }
}
setInterval(modifyClasses, 1000);

What can I do to ensure that the class name changes correctly?

2

Try this simplified approach:

document.querySelector('b.abcName').classList.replace('abcName', 'xyzName');

Make sure this code runs after the DOM is fully loaded. You can wrap it in window.onload:

window.onload = function() {
    document.querySelector('b.abcName').classList.replace('abcName', 'xyzName');
};

This ensures the class name changes correctly.

3

Alice45's approach is more efficient and precise, but if you're looking for a way to iterate through potential multiple elements, you might want to consider using querySelectorAll. This is especially useful if there are more than one element with the same class or structure:

window.onload = function() {
    const elements = document.querySelectorAll('b.abcName');
    elements.forEach(element => {
        element.classList.replace('abcName', 'xyzName');
    });
};

This function will select all <b> elements with the class abcName and replace their class name with xyzName. It's a more versatile solution for documents with multiple elements needing the same change.

4

To modify class names in a structured and efficient way, you should ensure that you are targeting the correct elements and that your code executes after the DOM is fully loaded. Your existing approach seems to be targeting the wrong element because of an incorrect comparison in the JavaScript function.

For flexibility and efficiency, especially if you might have multiple elements to update, consider using the querySelectorAll method. Here's a refined, actionable solution:

window.onload = function() {
    const elements = document.querySelectorAll('b.abcName');
    
    elements.forEach(element => {
        element.classList.replace('abcName', 'xyzName');
    });
};

This code waits for the whole page to load before executing. It selects all <b> elements with abcName and updates their class to xyzName. The use of classList.replace is direct and ensures no unintended classes are removed or added.

5

Keep it simple with:

window.onload = function() {
    const elements = document.querySelectorAll('b.abcName');
    elements.forEach(element => {
        element.classList.replace('abcName', 'xyzName');
    });
};

This does the trick on page load, efficiently changing all b.abcName elements to xyzName.