DEV Community

Cover image for (Javascript) My learning journey: DOM Manipulation 201
Eric The Coder
Eric The Coder

Posted on

(Javascript) My learning journey: DOM Manipulation 201

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.


// Select the document element, head and body

// Selecting a specific tag, class and id
// or

// Multiple selection of a class, id and tag. 
// return nodes list
const messages = document.querySelectorAll('.message') 
const titles = document.querySelectorAll('#title')
const divs = document.querySelectorAll('div')

// or return a live HTMLCollection
const messages = document.getElementsByClassName('message')
const divs = document.getElementsByTagName('div')

// Loop in results nodes list
messages.forEach(message => console.log(message))
titles.forEach(title => console.log(title))
divs.forEach(div => console.log(div))
Enter fullscreen mode Exit fullscreen mode

Creating and inserting elements

// insert beforebegin / aftebegin / beforeend / afterend
const name = document.querySelector('#name')
name.insertAdjacentHTML('afterend', '<div>Inserted HTML</div>')

// Create a element
const message = document.createElement('div')
message.textContext = 'This is a new message'
// or
message.innerHTML = '<h3>This is a new message</h3>'

const body = document.body
// insert first
// or insert last
// or insert before
// or insert after
Enter fullscreen mode Exit fullscreen mode

Remove elements

const message = document.querySelector('.message')
Enter fullscreen mode Exit fullscreen mode


// set inline Style
const message = document.querySelector('.message') = '#ffffff' = '#636363'

// Get style
height = getComputedStyle(message).height

// Set relative to style = height + 10

// Set css property (variable)'--color-primary', 'blue')

Enter fullscreen mode Exit fullscreen mode


const image = document.querySelector('.logo')
console.log(image.src) //
console.log(image.className) // 'logo'

// Get and set custom attributes
<img src="" note="test"> 
console.log(image.getAttribute('note')) // test
image.setAttribute('note') = 'test2'

// Get data attributes
<img src="" data-version="1.0"> 
console.log(image.dataset.version) // '1.0'

Enter fullscreen mode Exit fullscreen mode


// Remove a class
const message = document.querySelector('.message')

// Add one or multiple class
message.classList.add('hidden', 'title')

// Toggle (add if not present and remove is present)

// We can check if a element contain a specific class
if (message.classList.contains('hidden')) {
  // do something
Enter fullscreen mode Exit fullscreen mode


// Add event to an element
const h1 = document.querySelector('h1')
h1.addEventListener('mouseenter', function(e) {
  alert('You are now reading title')

// Add and remove event
const alterH1 = function(e) {
  alert('You are now reading title')
  h1.removeEventListener('mouseenter', alertH1)

// Event will be execute only once
h1.addEventListener('mouseenter', alertH1)

// Remove after 5 seconds
setTimout(() => h1.removeEventListener('mouseenter', alertH1), 5000)

Enter fullscreen mode Exit fullscreen mode

DOM Traversing

  <h1>This is my blog</h1>
  <div class="message">Message Parent
    <div class="message-header">Message child 2</div>
    <div class="message">Message child 1</div>
    <div class="message">Message child 2</div>
Enter fullscreen mode Exit fullscreen mode
// Get element child
const message = querySelector('.message')

// Get all .message child (return Node List)
sub_messages = message.querySelectorAll('.message')

// Get all children (return HTMLCollection)
children = message.children

// Get parent element
const parent = message.parentElement // body

// Get siblings
const before = message.previousElementSibling // h1
const after = message.nextElementSibling // h2

// Get all siblings
const all = message.parentElement.children

// Loop forEach
[...all].forEach(element => console.log(element))
Enter fullscreen mode Exit fullscreen mode

DOM Lifecycle

// document ready
document.addEventListener('DOMContentLoaded', function(e) {
  console.log('HTML and DOM loaded')

// complete page load (including images, external resources, etc.)
window.addEventListener('load', function(e) {
  console.log('Page loaded')

Enter fullscreen mode Exit fullscreen mode

Top comments (0)