돔과 바인딩에 대해

돔이란(Document Object Model)

돔의 기본 개념

• 문서의 객체 모델

• 트리구조

• js를 통한 조작

• 속성 및 메서드

DOM의 위치와 동작

1. 브라우저의 메모리:
• DOM은 웹 페이지를 렌더링하기 위해 브라우저의 메모리 내에 생성됩니다. 이 DOM 트리는 페이지의 구조를 반영하고 있으며, 각 노드(요소, 텍스트, 속성 등)는 메모리에서 객체로 표현됩니다.

2. 문서 로딩과 DOM 생성:
• 웹 페이지가 로드될 때, 브라우저는 HTML 문서를 파싱하고 DOM을 생성합니다. HTML 문서의 각 요소는 DOM 트리의 노드로 변환됩니다.
• 브라우저는 HTML을 파싱하여 DOM 트리를 생성한 후, 이 트리를 사용하여 페이지를 렌더링합니다. 이 과정에서 CSS가 적용되어 최종적으로 화면에 표시됩니다.

DOM과 브라우저의 관계

1. 브라우저와 DOM 생성:
• 자동 생성: 웹 브라우저는 HTML 문서를 파싱할 때 자동으로 DOM을 생성합니다. 웹 페이지의 HTML, CSS, 자바스크립트가 로드되면 브라우저는 이 문서를 기반으로 DOM 트리를 생성하고, 이를 사용하여 페이지를 렌더링합니다.
• 브라우저 내장: DOM은 브라우저의 핵심 기능 중 하나로, 별도로 설치하거나 추가적인 소프트웨어를 다운로드할 필요 없이 브라우저가 기본적으로 지원합니다.

2. 웹 페이지 로딩 과정:
• HTML 파싱: 브라우저가 HTML 파일을 파싱하여 문서의 구조를 분석합니다.
• DOM 생성: HTML 요소, 텍스트, 속성 등을 기반으로 DOM 트리가 생성됩니다.
• 렌더링: 브라우저는 DOM을 사용하여 페이지를 화면에 렌더링하고, CSS 스타일을 적용합니다.

3. 자바스크립트와 DOM:
• 제어와 조작: 자바스크립트를 사용하여 DOM을 동적으로 제어할 수 있습니다. 이를 통해 페이지의 콘텐츠를 변경하거나 사용자와 상호작용할 수 있습니다.
• 브라우저의 JavaScript 엔진: 자바스크립트 코드가 실행되는 환경은 브라우저 내장 JavaScript 엔진(예: V8, SpiderMonkey 등)이며, 이 엔진이 DOM과 상호작용합니다.

4. 브라우저 개발자 도구:
• DOM 확인: 대부분의 브라우저에는 개발자 도구가 내장되어 있어, 웹 페이지의 DOM 구조를 시각적으로 확인하고 조작할 수 있습니다. 개발자 도구를 열면 현재 페이지의 DOM을 트리 구조로 보고 수정할 수 있습니다.

5. 브라우저와 DOM의 관계:
• 브라우저의 역할: 브라우저는 DOM을 생성하고 관리하며, 웹 페이지가 로드되거나 사용자의 상호작용에 따라 DOM을 업데이트합니다. 브라우저의 버전이나 종류에 따라 DOM의 동작 방식은 다를 수 있지만, DOM 자체는 브라우저의 기본 기능으로 제공됩니다.
• 웹 개발자 도구: 브라우저의 개발자 도구를 사용하여 DOM을 실시간으로 확인하고 수정할 수 있습니다. 이는 개발 및 디버깅에 매우 유용합니다.

DOM의 중요성

• 페이지 동적 업데이트: 사용자가 상호작용할 때 웹 페이지를 동적으로 업데이트하는 데 필수적입니다.

• 인터랙티브 웹 애플리케이션: 사용자 입력을 처리하고, 다양한 이벤트에 응답하며, 동적인 콘텐츠를 생성하는 데 필수적입니다.

• 웹 애플리케이션의 핵심: 현대 웹 애플리케이션의 대부분은 DOM을 통해 페이지를 동적으로 조작하며, 사용자에게 더 나은 경험을 제공합니다.

추가 사항

• 노드 (Node): DOM에서 HTML 문서의 구성 요소를 나타내는 객체. 요소 노드, 텍스트 노드, 속성 노드, 주석 노드 등이 있습니다.

• innerHTML: 요소의 HTML 콘텐츠를 읽거나 설정하는 프로퍼티. 요소 내부의 HTML을 동적으로 변경할 수 있습니다.
• 읽기: 요소의 현재 HTML 콘텐츠를 문자열로 반환합니다.

javascript코드 복사
var content = document.getElementById('example').innerHTML;
console.log(content); // 요소의 HTML 콘텐츠

• 쓰기: 요소의 HTML 콘텐츠를 새 문자열로 설정합니다. 기존의 자식 노드들은 삭제되고, 새로운 HTML 내용으로 교체됩니다.

javascript코드 복사
document.getElementById('example').innerHTML = '<p>새로운 내용</p>';

이 경우, <div id=”example”>의 내용이 <p> 새로운 내용</p>로 변경됩니다.

• outerHTML: 요소와 그 내용을 포함한 HTML 문자열을 읽거나 설정하는 프로퍼티. 요소 자체를 포함하여 전체 HTML을 수정할 수 있습니다.
• 읽기: 요소와 그 내용을 포함한 HTML 문자열을 반환합니다.

javascript코드 복사
var html = document.getElementById('example').outerHTML;
console.log(html); // 요소 자신과 내용을 포함한 HTML

• 쓰기: 요소 자신과 그 내용을 새 HTML로 교체합니다. 이 과정에서 요소가 새 HTML로 대체되며, 기존 요소는 문서에서 제거됩니다.

javascript코드 복사
document.getElementById('example').outerHTML = '<div id="example"><p>새로운 내용</p></div>';

이 경우, 원래의 <div id=”example”>가 새로운 HTML로 교체됩니다.

바인딩이란

js에서의 바인딩 2가지

1. 데이터 바인딩

2. 이벤트 바인딩