DOM, localStorage, 이벤트 핸들러, 동적 DOM 조작

1. DOM(Document Object Model)

DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 제공하는 인터페이스이다.

HTML이나 XML 문서의 각 요소에 접근하고 조작할 수 있는 방법을 제공한다.

• 개념: 웹 페이지를 논리적인 트리 구조로 표현한 모델이고, 각 HTML 요소는 DOM 노드로 표현된다
• 사용: JavaScript를 사용하여 DOM에 접근하고 수정할 수 있으며, 이를 통해 동적으로 웹 페이지를 변경할 수 있다.

2. localStorage와 JSON 활용

localStorage

localStorage는 클라이언트 측에서 데이터를 장기간 저장할 수 있는 메커니즘이다.
이를 통해 사용자의 로컬 브라우저에 데이터를 저장하고, 세션이나 페이지가 새로고침되어도 데이터를 유지할 수 있다.

• 사용: localStorage.setItem('key', 'value')로 데이터를 저장하고, localStorage.getItem('key')로 데이터를 가져올 수 있다.

JSON (JavaScript Object Notation)

JSON은 JavaScript의 객체 표기법을 기반으로 하는 경량 데이터 교환 형식이다. 

JavaScript 객체를 문자열로 변환하거나, 문자열을 다시 JavaScript 객체로 파싱하는 데 사용된다.

• 사용: JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환한다. 
• JSON.parse()는 JSON 문자열을 JavaScript 객체로 파싱한다.

3. 이벤트 핸들러 (Event Handler)

이벤트 핸들러는 특정한 이벤트가 발생했을 때 실행할 JavaScript 코드를 정의하는 함수이다.

• 사용: HTML 요소에 이벤트 핸들러를 추가하여 사용자 상호작용에 반응하도록 할 수 있다.
• 예를 들어, 버튼 클릭(onclick), 키 입력(onkeydown), 마우스 이동(onmousemove) 등 다양한 이벤트를 감지할 수 있다.

4. JavaScript에서의 동적 DOM 조작

JavaScript를 사용하여 DOM을 동적으로 조작할 수 있다.

예를 들어, 새로운 요소를 생성하거나 기존 요소를 수정하고 삭제할 수 있다.

• DOM 생성: document.createElement()로 새로운 요소를 생성한다
• 요소 추가: parentNode.appendChild()로 요소를 부모 요소에 추가한다.
• 속성 설정: element.setAttribute()로 요소의 속성을 설정한다.
• 텍스트 삽입: element.textContent로 요소에 텍스트 내용을 추가하거나 수정한다.