class-09-DOM

//selecting element
// const headingId = document.getElementById('heading-1')
// const headingTag = document.getElementsByTagName('h1')

//selection by class/ Tag querySelector, querySelectorAll
const headingTag = document.querySelector('h1')
const headingClass = document.querySelector('.heading-1')
const headingId = document.querySelector('#heading-1')
const liElms = document.querySelectorAll('li')
const ulElm = document.querySelector('ul')
const containerElm = document.querySelector('.container')

// liElms.forEach(elm => console.log(elm))
// console.log(liElms[1].textContent)
// console.log(ulElm.childNodes)
// console.log(ulElm.children[1].textContent)
//changing element
// ulElm.children[1].textContent = 'Modified'
// ulElm.children[1].innerHTML = '<i>Modified</i>'
// console.log(ulElm.children[1].textContent)

const firstLi = ulElm.children[0]

// console.log(
//   firstLi.nextElementSibling.nextElementSibling.previousElementSibling
//     .parentElement
// )

//closest vs parent element
// console.log(
//   firstLi.nextElementSibling.nextElementSibling.previousElementSibling.parentElement.closest(
//     '.container'
//   )
// )
//Inserting Element
//Hard way
// const newLi = document.createElement('li')
// newLi.className = 'fourth'
// newLi.textContent = 'Summary'
// ulElm.appendChild(newLi)

//Easiest way
const liElm = '<li class="fourth">Summary</li>'
ulElm.insertAdjacentHTML('beforeend', liElm)

//Removing element
//using parent
// ulElm.removeChild(firstLi)
// firstLi.parentElement.removeChild(firstLi)
//using direct children
// firstLi.remove()

// firstLi.addEventListener('click', evt => {
//   console.log(evt.target.textContent)
// })

//event delegation
//problem solution
//performance benefit
// ulElm.addEventListener('click', evt => {
//   if (evt.target.textContent === 'Summary') {
//     console.log(evt.target.textContent)
//   }
// })

//capturing phase
//target vs current target
firstLi.addEventListener(
  'click',
  e => {
    alert(e.currentTarget.tagName)
  },
  true
)
ulElm.addEventListener(
  'click',
  e => {
    //alert(e.currentTarget.tagName)
    //stop bubbling
    // e.stopPropagation()
    alert(e.currentTarget.tagName)
  },
  true
)

containerElm.addEventListener(
  'click',
  e => {
    alert(e.target.tagName)
    alert(e.currentTarget.tagName)
  },
  true
)

//Bubbling Phase
// firstLi.addEventListener('click', e => {
//   alert(e.target.tagName)
//   alert(e.currentTarget.tagName)
// })

// ulElm.addEventListener('click', e => {
//   //alert(e.currentTarget.tagName)
//   //stop bubbling
//   // e.stopPropagation()
//   alert(e.currentTarget.tagName)
// })

// containerElm.addEventListener('click', e => {
//   alert(e.currentTarget.tagName)
//   // alert(e.currentTarget.tagName)
// })