DEV Community

loading...
Cover image for (Javascript) My learning journey: DOM Manipulation 201

(Javascript) My learning journey: DOM Manipulation 201

ericchapman profile image Eric Chapman ・3 min read

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 dev.to 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.

Selecting


// Select the document element, head and body
console.log(document.documentElement)
console.log(document.head)
console.log(document.body) 

// Selecting a specific tag, class and id
document.querySelector('button')
document.querySelector('.title')
document.querySelector('#name')
// or
document.getElementById('name')

// 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.classList.add('message')
message.textContext = 'This is a new message'
// or
message.innerHTML = '<h3>This is a new message</h3>'

const body = document.body
// insert first
body.prepend(message)
// or insert last
body.append(message)
// or insert before
body.before(message)
// or insert after
body.after(message)
Enter fullscreen mode Exit fullscreen mode

Remove elements

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

Style

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

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

// Set relative to style
message.style.height = height + 10

// Set css property (variable)
document.documentElement.style.setProperty('--color-primary', 'blue')

Enter fullscreen mode Exit fullscreen mode

Attributes

const image = document.querySelector('.logo')
console.log(image.src) // https://exemple.com/image.png
console.log(image.className) // 'logo'

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

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

Enter fullscreen mode Exit fullscreen mode

Classes

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

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

// Toggle (add if not present and remove is present)
message.classList.toggle('hidden')

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

Events

// 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

<body>
  <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>
  </div>
  <h2>Footer</h2>
</body>
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

Discussion (0)

pic
Editor guide