DOM

Document Object Model

DOM → HTML Structure

window

window → Global Objects

window.document → Point the HTML

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <button onclick="changeBG('black')">Change Background - Black</button>
    <button onclick="changeBG('white')">Change Background - White</button>
    <script src="index.js"></script>
  </body>
</html>

console.log(window);  // window: is  only available in browser not in node.js - javascript runtime environment 

// ********** DRY Principle - Break
// function changeBG() {
//   document.body.style.backgroundColor = "black"
// }

// function whiteBG() {
//   document.body.style.backgroundColor = "white"
// }

function changeBG(color) {
  document.body.style.backgroundColor = color;
}

Event Listeners

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <button id="dak-mode-btn">Change Background - Black</button>
    <button onclick="changeBG('white')">Change Background - White</button>
    <script src="index.js"></script>
  </body>
</html>

function changeBG(color) {
  document.body.style.backgroundColor = color;
}

const darkBTN = document.getElementById('dak-mode-btn');
darkBTN.innerText = "Dark Mode";
darkBTN.addEventListener('click', function () {
  changeBG('black')
})