Documentation

Student-friendly HTML, CSS, and JavaScript reference with examples

Sections


                                        querySelector()


                                        querySelectorAll()


                                        .textContent


                                        .value


                                        for...of (DOM)


                                        addEventListener()


                                        'click'


                                        'input'


                                        .style


                                        .classList.add()


                                        .classList.remove()


                                        .classList.toggle()


                                        createElement()


                                        .appendChild()


                                        .remove()


                                        .parentElement


                                        .getAttribute()


                                        data-*

classList.toggle

Toggles a CSS class - adds it if missing, removes it if present.

const button = document.querySelector('button');

button.addEventListener('click', function() {
  button.classList.toggle('active');
});

// First click: adds 'active'
// Second click: removes 'active'
// Third click: adds 'active' again

Perfect for on/off states!