[javascript] 문서 객체 모델 (DOM) Study note

October 4, 2022

“혼자 공부하는 자바스크립트” 스터디 모임 정리 노트 입니다. 📚

문서 객체 조작하기

문서 객체 모델 (Document Object Model) <html>, <head>, <body>, title, div 등 HTML 내 요소(Element)들을 자바스크립트 에서는 문서 객체(Document Object) 라고 부른다. 이 문서 객체를 조합하여 만든 전체적인 형태를 문서 객체 모델(DOM)이라고한다.
document 객체 document 객체는 DOM 제어를 위한 다양한 method를 지원한다. MDN 링크 : https://developer.mozilla.org/ko/docs/Web/API/Document

이벤트 활용

이벤트 모델의 종류

표준 이벤트 모델

document.body.addEventListener('keyup', (event) => { })
// document.이벤트를 감지하는 HTML요소.addEventListener('이벤트종류', (event) => { })

고전 이벤트 모델

document.body.onkeyup = (event) => { }
// document.이벤트를 감지하는 HTML요소.on이벤트종류 = (event) => { }

인라인 이벤트 모델

<script>
    const listener = (event) => { }
</script>
<body onkeyup="listener(event)"> </body>
<!-- <이벤트를 감지하는 HTML요소 on이벤트종류="함수명"> -->

※ 모든 이벤트 모델에서 실행되는 함수는 첫번째 매개변수로 event 객체를 받는다.

※ DOMContetntLoaded와 같이 이벤트를 감지할 Element가 필요하지 않은 경우도 있다.

관련 MDN 링크 : https://developer.mozilla.org/en-US/docs/Web/API/Event

이벤트 종류

keydown. keypress, keyup, click, scroll , focus, blur등 다양한 종류가 있다.

관련 MDN 링크 : https://developer.mozilla.org/en-US/docs/Web/Events
- Keyboard event에는 어떤 키를 눌렀는지 확인하는 event.code, event.keycode, event.altKey, event.ctrlKey, event.shiftKey property가 사용된다.
  
  ※ event.code 의 코드 목록 : https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values
  
  ※ event.keycode의 코드 목록 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

( + 리액트에서의 이벤트 처리 관련 문서 : https://reactjs.org/docs/handling-events.html )

HTML 요소 별 접근 방식
- <select> & <option>
  - event.target.options : 모든 <option>을 배열로 가지고 있는 property
  - event.target.options[Index].value : 해당 index의 value를 가지고 있는 property
  - event.target.options.selectedIndex : 선택된 option의 index를 가지고 있는 property
  - <select multiple> 인 경우 event.target.options배열의 각 요소의 .selected Boolean 값으로 확인할 수 있다.
- <span>, <p>, <h1> 등
  - document.querySelector('찾을값').textContent : 현재 value값을 가지고 있는 property
- <input type="checkbox">, <input type="radio"
  - event.target.checked : 체크되었는지를 Boolean값으로 가지고 있는 property
조기 리턴 ( early return ) : 함수 중간 분기점( if, switch 등 ) 에서 return 문을 사용하여 나머지 코드를 실행하지 않고 함수를 조기 종료 시키는 것
기본 이벤트 막기 : event.preventDefault()

이벤트 함수 안에서 직접 코딩한 이벤트 외 브라우저가 기본적으로 지원하는 동작을 막는다. ex) 우클릭 시 컨텍스트 메뉴( context menu )를 출력하는 것, submit 버튼을 눌렀을 때 화면을 이동하는 것 등
localStorage & sessionStorage 객체

웹 API ( : 브라우저가 제공하는 기능)

웹 브라우저에 데이터를 저장하고 사용하는 객체.
- localStorage.setItem(key, value) : 값을 저장한다. localStorage.key 또는 localStorage[key]의 형태로도 사용할 수 있다.
- localStorage.getItem(key) : 저장된 값을 추출한다. 위 객체의 형태를 사용할 수도 있다.
- localStorage.removeItem(key) : 특정 값을 삭제한다.
- localStorage.clrear() : 모든 값을 삭제한다.
※ 위 method는 localStorage, sessionStorage가 모두 동일하다.

※ MDN : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Rose

문서 객체 조작하기

이벤트 활용