09-dom.html

<!DOCTYPE html>
<head>
  <title>DOM</title>
</head>
<body>

  <button> Hello </button>
  <button class="js-button"> Second Button</button>

    <script>
      // when HTML element is inside JavaScript it is just a javascript Object.

      console.log(document.querySelector('button').innerHTML);

      document.querySelector('button')
        .innerHTML = 'changed';

      const buttonElement = document.querySelector('.js-button');

      // using the DOM we can get HTML elements from the page put it inside JavaScript and save it in a variable. 

      // The DOM combines JS and HTML AND gives full cpntrol of the webpage

      console.log(buttonElement);

      /*
      console.log(document.title);
      document.title = 'changed';

      console.log(document.body);

      console.log(typeof document.body);

      console.log(document.body.innerHTML);

      document.body.innerHTML = '<button> Good Job!</button>';
    */

      /*
      document.body.innerHTML = 'Hello';
      document.title = 'Good Job!';
      */
    </script>
</body>
</html>