rodrigophpweb/classlist.js

## classlist.js
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilização do classList</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 10vh
        }

        button {
            background: #000;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        section {
            background-color: orangered;
            padding: 20px;
            color: white;
            display: none;
        }

        section.orange {
            background-color: orange;
            color: black;
            display: block;
        }

        section h2 {
            margin-bottom: 20px;
        }

        .active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- Botões para manipulação -->
    <button>Manipulador</button>
    <button>Trocar cor</button>

    <!-- Sessão com conteúdo -->
    <section class="active">
        <h2>Trabalhando com o método classList do JavaScript</h2>
    </section>

    <script>

        // Armazendo os elementos HTML em variáveis
        const button = document.getElementsByTagName('button')[0]
        const changeColor = document.getElementsByTagName('button')[1]
        const section = document.querySelector('section')

        // Adicionando evento de click para o botão de manipulação
        button.addEventListener('click', () => {
            /*
            A instrução abaixo adiciona a classe active
            section.classList.add('active')
            */

            /*A instrução abaixo remove a classe active
            section.classList.remove('active')
            */

            /*A instrução abaixo alterna a classe active
            section.classList.toggle('active')*/
        })

        // Adicionando evento de click para o botão de troca de cor
        changeColor.addEventListener('click', () => {
            section.classList.replace('active', 'orange')
            section.classList.toggle('orange')
        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Utilização do classList</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	padding: 10vh
	}

	button {
	background: #000;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 20px;
	}

	section {
	background-color: orangered;
	padding: 20px;
	color: white;
	display: none;
	}

	section.orange {
	background-color: orange;
	color: black;
	display: block;
	}

	section h2 {
	margin-bottom: 20px;
	}

	.active {
	display: block;
	}
	</style>
	</head>
	<body>
	<!-- Botões para manipulação -->
	<button>Manipulador</button>
	<button>Trocar cor</button>

	<!-- Sessão com conteúdo -->
	<section class="active">
	<h2>Trabalhando com o método classList do JavaScript</h2>
	</section>

	<script>

	// Armazendo os elementos HTML em variáveis
	const button = document.getElementsByTagName('button')[0]
	const changeColor = document.getElementsByTagName('button')[1]
	const section = document.querySelector('section')

	// Adicionando evento de click para o botão de manipulação
	button.addEventListener('click', () => {
	/*
	A instrução abaixo adiciona a classe active
	section.classList.add('active')
	*/

	/*A instrução abaixo remove a classe active
	section.classList.remove('active')
	*/

	/*A instrução abaixo alterna a classe active
	section.classList.toggle('active')*/
	})

	// Adicionando evento de click para o botão de troca de cor
	changeColor.addEventListener('click', () => {
	section.classList.replace('active', 'orange')
	section.classList.toggle('orange')
	})
	</script>
	</body>
	</html>