👋

Most useful DOM manipulation methods and properties

Methods

querySelector() method. Select an element (by name, class or ID):

const element = document.querySelector('element');
const element = document.querySelector('.class');
const element = document.querySelector('#id');

getElementById() method. Select an element by ID:

const element = document.getElementById('id');

classList.remove() method. Remove a class from an element:

const element = document.querySelector('.class').classList.remove('.another-class');

classList.add() method. Add a class to an element:

const element = document.querySelector('.class').classList.add('.another-class');

classList.toggle() method. Toggle between clases in an element:

const element = document.querySelector('.class').classList.toggle('.another-class');

addEventListener() method. Creates an event listener on an element (for a click or key press):

// Click
document.getElementById('id').addEventListener('click', function () {
    // Something to run when the user clicks on the element with the indicated 'id'.
});

// Key press (global)
document.addEventListener('keydown', function (event) {
    console.log(event.key);
    if (event.key === 'Escape')
        closeModalWindow();
});

Properties

textContent property. Get or set the displayed text in the HTML document:

// Get the text
const elementText = document.getElementById('id').textContent;
// Set the text
document.getElementById('id').textContent = 'New text';