12. DOM & EVENT

이수현·2022년 5월 12일
0

TIL

목록 보기
12/23

📚DOM이란?

❗️위의 내용을 정리하면 웹 페이지는 DOM 표현을 통해 조작할 수 있다는 것을 말한다.

-> DOM 표현은 웹 페이지의 객체 지향적 표현으로 Javascript와 같은 스크립팅 언어로 수정할 수 있다.(=조작할 수 있다.)
-> 그리고 언뜻 보기에도 이미 DOM은 각 노드들이 Tree 구조로 이뤄져 있기 때문에 변경하고자 하는 노드에 접근해서 조작할 수 있어보인다.
element들의 속성또한 Tree구조의 노드로 되어있는 것을 확인할 수 있다.

브라우저는 HTML 문서를 읽다가 <script> 태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행하는 순서를 통해 생성된다.
-> 만약 페이지 상단에 대용량의 스크립트 파일이 있는 경우 해당 스크립트를 모두 받아서 실행할 때 까지 DOM 생성이 멈춰지기 때문에 해당 스크립트 하단의 페이지가 표시되는 것이 지연되는 현상이 있다.
-> 위와 같은 현상을 해경하기 위한 방법으로 해당 script태그를 페이지 맨 아래 놓는 것이 하나의 방법이 될 수 있다.
-> 하지만 완벽한 해결책은 아니다.HTML 문서 자체가 아주 큰 경우라면 해당 문서를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려지는 현상이 발생할 것이다. => defer, async를 통해 해결

💡DOM API

defer, async

  • defer : 브라우저는 defer 속성이 있는 스크립트(< script defer src=''>를 "백그라운드"에서 다운로드 한다. 따라서 해당 스크립트를 다운로드 받는 도중에도 DOM 생성(HTML 파싱)은 멈추지 않는다. -> 다운로드는 백그라운드에서 계속 받고, HTML 파싱이 모두 이뤄진 후에 실행된다.

  • async : async 속성 또한 "백그라운드"에서 다운로드를 한다. 하지만 defer 속성과는 다르게 다운로드가 완료되면 바로 실행하여, HTML 파싱이 중단되고 실행이 완료되면 다시 파싱을 시작한다. -> 또한, script 태그의 순서와 상관없이 먼저 다운로드 완료되는 script가 먼저 실행되므로 유의해서 사용해야한다.

🔔Event

이벤트란 일반적으로 사용자의 동작 혹은 프로그램에서 발생하는 특정 상황을 의미한다.

보통 이벤트가 발생하면 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생

  • 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미.
  • 자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있음.
  • 입력양식으로 부터 사용자의 입력값을 가져올 수 있음.
  • HTML 이벤트 속성은 자바스크립트 구문을 직접 실행하거나 함수를 호출할 수 있다.

Event 목록은 https://developer.mozilla.org/en-US/docs/Web/API/Element#events 에서 이벤트를 클릭하면 어떤 property를 통해 발생시킬 수 있는지 자세하게 나와있다.

0개의 댓글