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))
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)
Remove elements
const message = document.querySelector('.message')
message.remove()
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')
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'
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
}
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)
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>
// 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))
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')
})
Top comments (0)