Condiciones:
classList para invertir qué elementos tienen la clase .highlight .<li> y alternar la clase de .highlight . en cada uno.¡Tu resultado debería ser así!
/* app.js */ let list = document.querySelector('li'); list.classList.add(''); /* index.css */ /*No need to touch anything in this file:*/ li { background-color: #B10DC9; } .highlight { background-color: #7FDBFF; } <!-- index.html --> <!DOCTYPE html> <head> <title>ClasList</title> </head> <body> <link rel="stylesheet" type="text/css" href="index.css"> <!--LEAVE THIS FILE ALONE!--> <ul> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> </ul> <script src="app.js"></script> </body> </html>La siguiente solución elimina el estilo de clase .highlight de <li> si el estilo de clase .highlight se aplica a <li> . Si el estilo de clase .highlight no se aplica al elemento <li> , el estilo de clase .highlight se agrega al elemento <li> .
/* The querySelectorAll() method is used to select all <li> elements. */ let list = document.querySelectorAll('li'); var listArray = [...list]; /* Each <li> element is checked using the forEach() method. */ listArray.forEach(element => { /* Is the ".highlight" class style applied to the <li> element? */ if(element.classList.contains("highlight")) { /* Remove the ".highlight" class style from the <li> element. */ element.classList.remove("highlight"); } else { /* Add the class style ".highlight" to the <li> element. */ element.classList.add("highlight"); } }); li { background-color: #B10DC9; } .highlight { background-color: #7FDBFF; } <!DOCTYPE html> <head> <title>ClasList</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> </ul> <script src="app.js"></script> </body> </html> /* The querySelectorAll() method is used to select all <li> elements. */ let list = document.querySelectorAll('li'); window.addEventListener('load', (event) => { for(let i = 0 ; i < list.length ; ++i) { if(list[i].classList.contains("highlight")) list[i].classList.remove("highlight"); else list[i].classList.add("highlight"); } }); li { background-color: #B10DC9; } .highlight { background-color: #7FDBFF; } <!DOCTYPE html> <head> <title>ClasList</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> </ul> <script src="app.js"></script> </body> </html> /* The querySelectorAll() method is used to select all <li> elements. */ const li= document.querySelectorAll('li'); for(let i of li) { i.classList.toggle("highlight"); } li { background-color: #B10DC9; } .highlight { background-color: #7FDBFF; } <!DOCTYPE html> <head> <title>ClasList</title> <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <ul> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> <li>Hello</li> <li class="highlight">Hello</li> <li>Hello</li> </ul> </body> </html>