How to select element by 'role' attribute and filter by class with vanilla JS?

Question

Markup:

  

    How to Install for iPad

        

Answer 1

Try this:

// remove active class from all elements
document.querySelectorAll('[role="presentation"]').forEach(function (el){
el.classList.remove("active");
});

// add class 'active' to last element
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")

Notes:

• 'classList' will not work in IE9;
• I think you have to modify adding class row, depending on your needs.

Answer 2

You can try something like this:

var ele = document.querySelectorAll('[role="presentation"]');
ele[0].classList.remove("active"); //Remove active class for first element
ele[ele.length- 1].classList.add("active"); //Apply active class for last element
console.log(ele)

Answer 3

var eleLi = document.querySelectorAll('[role="presentation"]');  
for (var i = 0; i < eleLi.length; i++) {
    //remove class active
    eleLi[i].classList.remove('active');
}

//x is an index of li that you want to add the class. Such as 0,1,2
var x = eleLi.length - 1;

//add class active
eleLi[x].classList.add('active');