1
<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>

how do I change those class names here? I tried; 

document.querySelectorAll('li').className = "corgitype"

and

document.querySelectorAll('li').classList = "corgitype"

but nothing changes. corgitype is the new class name that I want to overwrite on bearname

Abhishek Agarwal
  • 1,190
  • 2
  • 19
  • 38
gunacan
  • 21
  • 6
  • *querySelectorAll* returns a NodeList, they don't have *className* or *classList* properties so don't bother setting them. What you need to do is iterate over the list and set the class individually. This must be a duplicate. – RobG Mar 16 '18 at 03:44

4 Answers4

2

querySelectorAll returns a static collection. You need to iterate this collection and can use className which will replace the existing one

document.querySelectorAll('li').forEach(function(item) {
  item.className = 'corgitype';
})
.corgitype {
  color: green;
}
<ul>
  <li class="bearname">Smokey</li>
  <li class="bearname">Teddy</li>
</ul>
brk
  • 48,835
  • 10
  • 56
  • 78
1

You need to iterate over the results of the query which returns a node list - note that if you are setting more than one class on the li's then this will overwrite all classes. Incidentally - if its only stylnig you are trying to do - then you can get to the li's without a class at all in the css - ul > li {//css style rules} so classes may not even be needed.

EDIT - I have added a bit of extra fluff into this to allow toggling of the classes and styles -a bit more verbose - but easier to see the effect of the class name change.

function changeClass(value){
  var listItems = document.querySelectorAll('li');
  var index = parseInt(value);
  var type;
  index%2 == 0
   ? type = "corgitype"
   : type = "bearname"
    
  for(i=0;i<listItems.length;i++){
    listItems[i].classList= type;
   };
   document.getElementById('toggleButton').value = index+1;
}
.bearname {color:blue}
.corgitype {color: red}
<ul>
 <li class="bearname">Smokey</li>
 <li class="bearname">Teddy</li>
</ul>
<hr/>
<button type="button" onclick="changeClass(this.value)" value="0" id="toggleButton">Click to toggle classes</button>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • Worth noting that the NodeList interface now has a [*forEach* method](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach) (but support might be lacking). – RobG Mar 16 '18 at 03:45
  • @RobG - that is very interesting - it is tedious to have to do a fro loop for these queries - will investigate . Thanks – gavgrif Mar 16 '18 at 03:46
  • You can also do `Array.from(document.querySelectorAll(...)).forEach(...)` but it's a lot more to type. ;-) – RobG Mar 16 '18 at 03:48
0
<html>
<head>
<style>
.classa {
color:red;
}
.classb {
color:blue;
}
</style>

<script>
function change() {
    var list = document.getElementsByTagName("li");
    for (var i=0; i<list.length; i++) {
    var el = list[i];
    el.classList.remove('classa') ;
    el.classList.add('classb') ;
    }
}
</script>
</head>

<body>
<li class="classa">aaa</li>
<li class="classa">bbb</li>
<button type="button" onclick="change();">change</button>
</body>

</html>
Junhee Shin
  • 748
  • 6
  • 8
-1

You can use jQuery to accomplish this. You must include jQuery in your project or page to utilize its functionality. A tutorial for doing that exists here.

Once you have jQuery added, the easiest way to accomplish what you're after would be:

$('.bearname').addClass('corgitype').removeClass('bearname');
A Franklin
  • 121
  • 4
  • See [*jQuery is great*](https://www.doxdesk.com/img/updates/20091116-so-large.gif). – RobG Mar 16 '18 at 03:51