DOM

What is DOM?

• Dom stands for Document Object Model, and a structured representation of HTML documents.
• It allows JavaScript to access HTML elements and styles to manipulate them.
• Dom is automatically created by the browser as soon as the html page loads.

DOM Tree

• Dom is stored in a tree structure.
  
• 하나 하나의 요소들 = nodes / There is one element node and the DOM tree, and we can access and interact with each of these nodes using JavaScript.
• DOM always starts with the document object right at the very top. and document is a special object that we have access to in JavaScript. and this object serves as as an entry point into the DOM.

Parent and Childs

• the first child element of document is HTML (the root element in all HTML documents)
• Next, HTML usually has two child elements, head and body. They are siblings.

DOM Manipulation

• DOM Methods and properties for DOM are not part of JavaScript (Ex. document.querySelector())
• DOM Methods and properties are part of the WEB APIs (Ex. chrome, edges, safari..)
• WEB APIs are like libraries that browsers implement, and then we can access from out JavaScript code(interact).

Event Handler

• 여기서 first arguement는 click이고, second argument는 그 다음 메서드인데 오로지 여기서만 정의되어 있다. 다른 데서 call되지 않는다(a function value that contains the code we want to execute whenever the event happens.).
• It is JS Engine who'll call this function as soon as the event happens.

document.querySelector('.check').addEventListener('click', function () {
  console.log(document.querySelector('.guess').value);
});

• 위의 함수를 아래와 같은 방식으로 작성할 수도 있다. 함수의 value를 변수에 담아서.

const x = function () {
  console.log(document.querySelector('.guess').value);
};

document.querySelector('.check').addEventListener('click', x);

• Start guessing...이라는 html의 화면이 Correct Number!로 바뀌어서 화면에 나타난다.

<p class="message">Start guessing...</p>

document.querySelector('.message').textContent = 'Correct Number!';

• 한편 .value는 String을 반환하므로 아래와 같이 캐스팅할 수도 있다.
• guess가 없으면, 즉 공백을 입력하면, 경고문을 화면에 띄우도록 if 조건절을 작성한다.
• 이처럼 일종의 에러가 있는 상태에서 guess는 0이므로 조건절을 !guess로 작성하여 if문이 작동할 수 있는 true인 상태로 만든다.

 document.querySelector('.check').addEventListener('click', function () {
  	const guess = Number(document.querySelector('.guess').value);
  	console.log(typeof guess);
	});
	if (!guess) {
    document.querySelector('.message').textContent = '⛔️No number!';
 	}

// 1~20의 랜덤 넘버를 추출하는 방법
const number = Math.trunc(Math.random() * 20) + 1;

CSS Manipulation

• DOM Manipulation을 통해 JavaScript로 특정한 이벤트 발생 시 CSS도 수정할 수 있다.

if (guess === secretNumber) {
    /* When player wins */
    document.querySelector('.message').textContent = '🎉 Correct Number!';
    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').style.width = '30rem';
  }

---

JavaScript 코드

'use strict';

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

// message 클래스의 textContent를 함수로 만들어 클린코드
const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

// Again Reload
// 페이지를 리로드하면 하이 스코어가 사라지기에 값을 일일이 전부 재셋팅
// location.reload(); 하면 얼마나 쉽게요
document.querySelector('.again').addEventListener('click', function () {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  displayMessage('start guessing');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';
  //empty string is basically the absence
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);

  if (!guess) {
    /* When there is improper input - no value, Strings.. */
    displayMessage('⛔️No Number!');
  } else if (guess === secretNumber) {
    /* when the guess is right */
    displayMessage('🎉 Correct Number!');
    document.querySelector('.number').textContent = secretNumber;
    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').style.width = '30rem';
    //highscore setting
    if (score > highscore) {
      highscore = score;
      document.querySelector('.highscore').textContent = highscore;
    }
  } else if (guess !== secretNumber) {
    /* when guess is wrong */
    if (score > 1) {
      displayMessage(guess > secretNumber ? 'Too High!' : 'Too Low!');
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      if (score == 1) score--;
      document.querySelector('.score').textContent = score;
      displayMessage('You Lost the Game!');
    }
  }
});

---

참고 : 클래스명 작성

• 예를 들어

<button class="btn check">Check!</button>

일 경우에 btn과 check라는 두 개의 클래스를 가진다. 그러므로 버튼 일반이 아닌, 이 체크 버튼에만 어떤 특정한 이벤트를 주고 싶은 경우에는 ".check"를 사용할 수 있을 것이다.

• 결론적으로 말해 html에서 띄어쓰기를 통해 중복되는 클래스를 가질 수 있다.