2. Use of classlist (element class name)

calssList attribute , Returns the class name of the element .

<style>
        .bg {
            background-color: black;
        }
</style>

<div class="one two"></div>
    <button>  Turn on and off the lights </button>
    <script>
        // classList  Returns the class name of the element 
        var div = document.querySelector('div');
        // console.log(div.classList[1]);
        // 1.  Add class name    Is to append the class name later, which will not overwrite the previous class name   Note that the front does not need to be added .
        div.classList.add('three');
        // 2.  Delete class name 
        div.classList.remove('one');
        // 3.  Switch classes 
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>

---

Happy study ！