如果对象具有特定的CSS类，请使用本机JavaScript更改对象的title属性

Question

So by using native javascript, how would I go about saying "if this object has this css class, add this to the title attribute"

document.addEventListener("DOMContentLoaded", function(event) { 
    if(element.classlist.contains("current_page_item")||element.classlist.contains("current-page-ancestor")){

    }
});

That is as far as I've gotten, I'm trying to stick to native javascript just so we don't have to load up any libraries and can keep the site as minimalist as possible.

Answer 1

You can use getElementsByClassName()

var x = document.getElementsByClassName("current_page_item");

Then loop and add title

x.forEach(function(element){
   element.title = "title";
});

or

for (var i = 0; i < x.length; i++) {
    x[i].title ="title";
}

To answer to your comment, to apply the title to the "a" element that is a child of the div element that has the "current_page_item" class

for (var i = 0; i < x.length; i++) {
    var y = x[i].getElementsByTagName("a");
    y[0].title = "title";
}

Answer 2

Similar to Rohit Shetty's reply, you could also use the querySelector:

let elements = document.querySelector(".current_page_item");
elements.forEach(function(e) {
  e.title = "title";
);

Answer 3

You can use getElementsByClassName()

var x = document.getElementsByClassName("current_page_item");
for(var i=0;i<x.length;i++){
    x[i].title += "BLAH";
}

Answer 4

I don't now if I have understood well.

But let's try. First, locate the elements.

const nodes = document.querySelectorAll('.current_page_item, .current_page_item')
// nodes are the elements of one of the classes names

Then, apply the class Names to title.

function containsOfTheClasses (node) {
    return classNames.some(x => node.classList.contains(x))
}

nodes.forEach(function (node) {
    node.title += classNames.filter(containsOfTheClasses).join(' ')
})