JS DOM

Selecting element

    

document.querySelector('#id-name');


    
    

document.getElementById('id-name');

Selecting multiple elements

    

document.querySelectorAll('.class-name');


    
    

document.getElementsByClassName('class-name');

Create element

    

const p = document.createElement('p');

append to list of children

    

div.append(p);


    
    

div.appendChild(p);

prepend to list of children

    

div.prepend(p);

Insert before

    

div.before(p);

Insert after

    

div.after(p);

Remove element

    

p.remove();


    
    

div.removeChild(p);

Events

Preferred 
    

button.addEventListener('click', function() {

});


    
    

button.onclick = function() {

};


    
    

function myFunction() {

};


    
    

<button onclick="myFunction">Click me</button>

Set style

JS properties are written using camelCase instead of dashes like in CSS.

    

let element = document.querySelector('#id-name');
element.style.backgroundColor = 'red';

Add class

    

let element = document.querySelector('#id-name');
element.classList.add('class-name');

Remove class

    

let element = document.querySelector('#id-name');
element.classList.remove('class-name');

Toggle class

    

let element = document.querySelector('#id-name');
element.classList.toggle('class-name');