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();
});
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';