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)