JS 기초정리(3)

DOM이란?

DOM(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다.

또한 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

돔 조작

위에 보이는 DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있다. 이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소(element)를 수정하거나 없애거나 할 수 있다.

웹 페이지 빌드 과정 (Critical Rendering Path CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 아래는 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.

Render Tree를 만들어서 Paint까지 하는 과정이 비용적인 면이 많이 들기 때문에 이 부분에서 성능최적화가 필요하다.

DOM 이벤트

위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 “이벤트”가 발생한다. 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너다.

이처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.

element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);

• 이벤트 종류

  • UI 이벤트

    load: 문서나 객체가 로드 완료되었을 때 발생
    change: 객체의 내용이 변동되거나 focus를 잃었을 때 발생
    resize: 객체의 크기가 바뀌었을 때 발생
    scroll: 스크롤바를 조작할 때 발생
    error: 에러가 발생했을 때 발생

  • 키보드 이벤트

    keydown: 키를 눌렀을 때 발생
    keyup: 키를 눌렀다가 땠을 때 발생
    keypress: 사용자가 눌렀던 키의 문자가 입력되었을 때 발생

  • 마우스 이벤트

    click: 객체를 클릭했을 때 발생
    dbclick: 객체를 더블클릭했을 때 발생
    mousedown: 마우스를 클릭했을 때 발생
    mouseout: 마우스가 특정 객체 밖으로 나갔을 때 발생
    mouseover: 마우스가 특정 객체 위로 올려졌을 때 발생
    mousemove: 마우스가 움직였을 때 발생
    mouseup: 마우스에서 손을 땠을 때 발생

  • 포커스 이벤트

    focus: 객체에 focus 되었을 때 발생
    blur: 객체가 focus를 잃었을 때 발생