DOM Manipulation Revision/Cheat Sheet

Selecting

The only two selector methods you need:

• querySelector

• querySelectorAll

const container = document.querySelector('.container')
console.log(container)

const listItems = document.querySelectorAll('li')
console.log(listItems)

Relative Selecting

You can call the selector methods from any element not just from document.

const container = document.querySelector('.container')
const h1sInContainer = container.querySelectorAll('h1')

---

Traversal

• children

• parentElement

• nextElementSibling

• previousElementSibling

.children is an HTMLCollection which is an array-like object. You can access its elements with bracket syntax [] and loop over it with for loops.

const list = document.querySelector('ul')
console.log(list.children[2])

for (let item of list.children) {
  console.log(item)
} 

---

Changing Content

• textContent

• innerHTML

element.textContent = 'Hello World!'
element.innerHTML = '<em>Hello World!</em>'

.innerHTML will turn the HTML tags in the string into DOM elements.

---

Manipulating Styles

console.log(element.style)

element.style.backgroundColor = 'fuchsia'

NOTE: Hyphenated CSS property names are in the style object as camelCase.

---

Manipulating CSS Classes

• classlist.add

• classlist.remove

• classlist.toggle

Instead of adding styles to the style object directly, you can write the style rules in a css file under a class name that you will then apply to the element in the DOM.

.selected {
  font-weight: bold;
  color: 'rebeccapurple'
}

const element = document.querySelector('div')

Add classes

element.classList.add('selected')

Remove classes

element.classList.remove('selected')

Toggle classes

If the element already has the selected class, .toggle will remove it, otherwise it will be added.

element.classList.toggle('selected')

Add And Remove Multiple Classes

element.classList.add('lorem', 'ipsum', 'dolor')
element.classList.remove('lorem', 'dolor')

---

Manipulating Attributes

In most cases you can just use the DOM element's corresponding property. Read more here for when property and attribute are synced.

<img src="https://placedog.net/500" alt="Random dog photo" class="goodest" />

const img = document.querySelector('img')
console.log(
    img.src,
    img.alt,
    img.className // HTML class attributes are `className` as a DOM property
)

You can change these values using the assigment operator =:

img.src = 'https://placedog.net/700'

---

Data Attributes

<ul>
  <li data-increment="100">Lorem Ipsum</li>
</ul>

const listItem = document.querySelector('li')
const increment = parseInt(listItem.dataset.increment)
console.log(increment)

---

Creating New Elements

• document.createElement

const newDiv = document.createElement('div')

Inserting Elements

• append

• prepend

• after

• before

.append

Adds elements to the end of the parent element's list of children.

<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

const parent = document.querySelector('.container')
const newElement = document.createElement('div')
newElement.textContent = "Hi I'm a new div"
parent.append(newElement)

<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <div>Hi I'm a new div</div> <------
</div>

.prepend

Adds elements to the beginning of the parent element's list of children.

<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

const parent = document.querySelector('.container')
const newElement = document.createElement('h2')
newElement = "Hi I'm a new h2"
parent.prepend(newElement)

<div class="container">
  <h2>Hi I'm a new h2</h2> <------
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

.after

Adds elements as siblings after the element its called on.

<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

const sibling = document.querySelector('h1')
const newElement = document.createElement('h2')
newElement = "Hi I'm a new h2"
sibling.after(newElement)

<div class="container">
  <h1>Hello World</h1>
  <h2>Hi I'm a new h2</h2> <------
  <p>Lorem ipsum dolor sit amet</p>
</div>

.before

Adds elements as siblings before the element its called on.

<div class="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

const sibling = document.querySelector('p')
const newElement = document.createElement('h2')
newElement = "Hi I'm a new h2"
sibling.before(newElement)

<div class="container">
  <h1>Hello World</h1>
  <h2>Hi I'm a new h2</h2> <------
  <p>Lorem ipsum dolor sit amet</p>
</div>

---

Removing Elements

• removeChild

• remove

.removeChild

const parent = document.querySelector('.container')
const child = parent.children[0]
parent.removeChild(child)

.remove

This is a newer (better?) method but is unsupported in Internet Explorer.

const element = document.querySelector('.container h2')
element.remove()

Event Listeners

• addEventListener

<button id="btn">Click me<button>

const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  console.log('button was clicked')
})