DOM Manipulation(2021-02-09)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

www.w3schools.com/js/js_htmldom.asp

JavaScript HTML DOM

Document Object Model

웹페이지가 로딩되면 브라우저는 DOM을 생성한다. 

각 브라우저별로 자바스크립트를 구동하는 자바스크립트엔진이있는데, 자바스크립트를 통해 DOM을 가지고 HTML과 CSS를 조작할 수 있는 것이다.  

그리고 명칭 document OBJECT model에서 알수 있듯이 object이므로 자바스크립트에서 object에 접근하던 방식대로 조작이 가능하다. 

그리고  document object에는 parent object가 있는데 window이다. 

window object안에 document가 property중 하나로 존재하는것을 볼 수 있다.

DOM Selectors

콘솔창에 document를 작성해서 document 객체를 보면 window와는 다르게 그냥 일반 HTML 파일처럼 보인다. 

그냥 HTML파일과 똑같이 생긴게 나온다....

실제로 document는 javascript object로 존재하지만 브라우저가 개발자가더 쉽게 수정할수있게 일반 HTML 파일처럼 보여주는것이다. 

document에는 selector라는 것을 사용해서 element를 조작할 수 있다. 

자주쓰이는 셀렉터는 이하의 리스트, w3school, MDN을 참조하자. 

DOM Events

자바스크립트는 이벤트를 보는데 쓸수있고 유저의 행동에 따라 행동하게 만들 수 있다. 

이벤트란 마우스를 클릭하거나, 특정장소로 마우스가 이동하거나, 서치바를 이용하려하거나 등이다. 이런 이벤트를 보고 자바스크립트를 통해서 react할 수 있는것이다. 

주요이벤트의 리스트는 이하의 링크를 참조하자

developer.mozilla.org/en-US/docs/Web/Events

Event reference | MDN

사용자로부터 입력을 받을때 숫자로 어떻게 변환되는지는 이하의 리스트를 참조 할 수 있다. 

www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Javascript Char Codes (Key Codes)

Callback Functions

133강 DOM Events를 따라하다보면 의문이들 수 있는 부분이있다. 

왜 button.addEventListener("click", addListAfterClick()); 그리고 input.addEventListener("keypress", addListAfterKeypress(event));  형태로 괄호를 붙이지 않는 것인지 말이다. 

이러한 것을 callback function이라고 한다. 

이런 형태의 자바스크립트코드가 실행될때 바로 addListAfterClick 이 실행되기를 원하는 것이 아니라. click이나 keypress 이벤트가 발생할때 실행시키는 것(()를 붙이는것)이다. 즉 addEventListener함수에게 click이벤트가 일어날때 어떤 함수를 실행할건지 참조점만 알려주는것으로 생각할 수 있다. 

DEVELOPER FUNDAMENTALS:V

innerHTML을 쓸 경우 HTML이 다시 parse되어야하고 전체 DOM이 재구성 되어야하고 웹브라우저에 다시 로드되어야해서 웹페이지에 성능저하를 가져온다. 

항상 웹페이지를 만들때는 DOM에 조작을 가하는 것을 최소화 하는 방식으로 만들려고 노력해야한다. 
(강의 140)