JavaScript DOM (class-8)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM(Document object Model)</title>
</head>
<body class='body'>
    <h1>DOM-The missing piece</h1>
    <div class="container">
        <ul id='nav'>

            <li class="first">First</li>
            <li class='second'>Second</li>
            <li class='three'>Third</li>
            <li class="four">Four</li>

        </ul>

    </div>
    <script>
        //DOM
//creating element
//selecting element
//Reading content from element
//update or edit existing element
//removing element

//selecting element
//id (#)
//class(.)
//element

//selecting element
// const h1Elm = document.querySelector('h1')
// const containerElm = document.querySelector('.container')
const navElm = document.querySelector('#nav')
// const FirstNavElm = document.querySelector('#nav .first')

// //id , element, class
// //getElementsByTagName
// //getElementsByClassName
// const navElmID = document.getElementById('nav')

// console.log(navElmID)

//reading content and writing content
// h1Elm.textContent = 'Our new <em>Content</em>'
// h1Elm.innerHTML = 'Our new <em>Content</em>'

// console.log(h1Elm.textContent)

//Traversing element
// const firstNavElm = navElm.children[0]
// console.log(
//   firstNavElm.nextElementSibling.nextElementSibling.previousElementSibling
// )

//parentElement (Immediate parent)
//closest() (write your target)
// console.log(firstNavElm.closest('.body'))

//ForEach couldn't applied on HTMLCollection(must be converted using Array.From())

//Removing Element

//using Target Element
//firstNavElm.remove()

//Using parent
// firstNavElm.parentElement.removeChild(firstNavElm)

//creating Element
//<li class="four">Four</li>
// const liElm = document.createElement('li')

// liElm.className = 'five'
// liElm.textContent = 'Five'

//appendChild
//prepend
// navElm.prepend(liElm)

//insetAdjacentHTML
//insetAdjacentElement

// navElm.insertAdjacentElement('beforeend', liElm)

// console.log(liElmHTML)

// const arrNavElm = Array.from(navElm.children)
// arrNavElm.forEach((elm) => {
//   elm.addEventListener('click', (e) => {
//     console.log(e.target.textContent)
//   })
// })

//Event Delegation
//performance
navElm.addEventListener('click', (e) => {
  if (e.target.className === 'five') {
    console.log('you are clicking new added element')
  }
  console.log(e.target)
})

const liElmHTML = '<li class="five">Five</li>'
navElm.insertAdjacentHTML('beforeend', liElmHTML)

//Event capturing
//Event Bubbling

    </script>
</body>
</html>