JAVASCRIPT DOM manipulation

자바스크립트에서는 css 와 비슷하게 html에 접근할 수 있다.

console.log(document.querySelector('.message'));

위 코드는 

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

의 값을 가진다 보면 html class 가 message인 코드를 가져온 것이다.

여기서 class 를 가져올때는 . 을 사용하고 id 를 사용할때는 # 를 사용한다.

console.log(document.querySelector('.message').textContent);

다음은 앞 코드에서 .textContext 가 추가 되었다. 이때는 

Start guessing...

오직 문자만 가져오는 걸 확인 할 수 있다.

DOM 은 document object Model : structured representation of HTML documents allows

javascript to access html elements and styles to manipulate them.

기본적으로 html document 와 javascript code 간의 연결이라고 생각하면 된다.

DOM 은 HTML 페이지가 로드 될때 자동적으로 생성되는데 이때 트리 구조를 가지게 된다.

각각의 HTML 요소들이 하나의 객체가 된다.

(W3 SCHOOL)

위 그림은 DOM 을 대략적으로 보여준 사진이다. 여기서 document 가 가장 위에 있음을 확인 할 수 있고 이는 document 에 반드시 들어가야 다른 node 에 접속 가능하므로 document. 으로 먼저 쓴 것이 이해가 된다. 따라서 DOM 은 html 문서의 트리 데이터 구조라고 볼 수 있겠다.

DOM은 자바스크립트의 일부가 아니라 WEB APIS(Application Programming Interface) 에서 사용할 수 있는 거고 자바스크립트는 그저 상호작용 할 뿐이다. web apis 에는 자바스크립트로 쓰여진 라이브러리가 있고 이를 이용할 뿐이다.

DOM manipulation 은 뜻 그대로이다.

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

document.querySelector('.number').textContent = '13';

document.querySelector('.score').textContent = '10';

다음과 같이 변환시키면 그것이 바로 DOM manipulation 이다.

console.log(document.querySelector('.guess').value);

document.querySelector('.guess').value = 23;

.value 는 값을 불러오는 역할을 한다. 마찬가지로 값을 대입 할 수 도 있다.

querySelector는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 요소를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. //mdn

여기서 선택자와 일치하는 문서를 모두 반환하고 싶다면 querrySelectorAll 을 사용한다.

for (let i = 0; i < btnsOpenModal.length; i++) {

  btnsOpenModal[i].addEventListener('click', openModal);

}

querrySelectorAll 을 사용하게 되면 nodelist 가 나오는데 배열과 같진 않지만 비슷하므로 for 함수로 모두 지정할 수 있다.

document.querySelector('.check').addEventListener('click', function () {

  console.log(document.querySelector('.guess').value);

});

다음엔 eventlistener 에 대해 알아보자!

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

위에서 addEventListener은 매쏘드로 두 인자를 가진다. 첫 번째 인자는 event가 어떤 형태로 오는 지에 대한 인자로 'click' 클릭 하면 이벤트가 실행된다는 뜻이다. 두 번째 인자는 이벤트가 실행되면 실행시킬 함수를 인자로 가진다. 함수 또한 값 이라서 함수 안에 함수는 충분히 가능하다. 이때 x() 처럼 함수를 실행시키면 안된다. 만약 x() 라고 작성했다면 자바스크립트가 이 줄을 검사 하자 마자 함수가 실행되어 버린다. 따라서 우리는 함수를 가르키는 x 만을 적어놔 event가 발생 했을 때 그때 함수를 실행 시켜야 한다.

event 는 click 말고도 키보드를 누르는 것 또한 해당된다. 예를 들어 esc 를 눌러 페이지에서 벗어나는 건 그 문서 전체에 해당하는 이야기이다. 그래서 선택자를 가져올 필요가 없다.

document.addEventListener('keydown', 함수 )

다음처럼 문서에 바로 매쏘드로 붙히면 된다. keydown , keyup , keypress 각각의 event가 있고 키를 누를때 , 키를 눌렀다 땔때 , 키를 누르고 있을 때 이다.

document.addEventListener('keydown', function (event) {

  console.log(event);

});

키를 누르게 되면 그 키에 해당하는 객체가 인자 event로 함수 안에 들어가게 된다. 실제로 실행시키면 수 많은 객체 값을 확인 할 수 있고 만약 esc로 종료하는 걸 넣고 싶다면

document.addEventListener('keydown', function (event) {

  if (event.key === 'Escape' && !modal.classList.contains('hidden')) {

    hiddenModal();

  }

});

다음과 같이 작성하자.

자바스크립트에서 Css 까지 설정할 수 있다.

    document.querySelector('body').style.backgroundColor = '#60b347';

    document.querySelector('.number').style.width = '30rem';

css와 다른 점은 background-color : #60b347 ;

으로 자바스크립트의 전통인 calmelCase 를 사용하고 값들은 전부! string으로 해야 작동한다고 한다. 이와 같은 방식을 inline css 라고 한다!

다른 방식으로는 

  modal.classList.add('hidden');

  overlay.classList.add('hidden');

  modal.classList.remove('hidden');

  overlay.classList.remove('hidden');

선택자를 추가하거나 제거하는 방식으로 document를 변화하는 방식이다.

한가지의 class에는 수 많은 속성들이 컨테이너 처럼 들어있을 수 있다. 따라서 선택자를 추가하고 제거하는 방식으로 webpage에서 요소들을 추가하거나 없애기에 효율적이다.

.hidden {

  display: none;}

html 태그에 hidden 선택자를 추가하면 그 태그는 우리 눈에 사라진다. 선택자를 제거한다면 눈에 보이게 된다.

const x = function () {

  const guess = Number(document.querySelector('.guess').value);

  console.log(guess);

  if (!guess) {

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

}};

함수 x 를 위와 같이 정의 했다. 여기서 guess 보자면 입력 된 값이 없으면 no! number! 을 출력하라고 명령했다. 보통 input 되는 값은 string 형식 이므로 Number(" ") = 0 

0은 falsy value 이고 if 를 실행시키기 위해 ! 까지 작성하였다.