문서 개체 모델(DOM)은 기본적으로 "웹 페이지가 뒤에서 작동하는 방식"에 대한 웹 개발자 용어로, 모든 웹 개발자가 갖춰야 할 것입니다. 그들의 툴킷. 이는 현대 웹 개발에 힘을 실어주는 비법과도 같습니다.

그런데 왜 DOM인가요? 나는 최근에 브라우저가 어떻게 작동하는지에 대한 비디오를 우연히 발견하고 일부 기사에 대해 자세히 설명했으며 이것이 “왜?”

모든 브라우저는 **브라우저 엔진**과 함께 작동합니다. 이는 HTML, CSS, JavaScript 등의 웹 콘텐츠를 사용자가 상호 작용할 수 있는 시각적 표현으로 렌더링하는 웹 브라우저의 핵심 구성 요소입니다.

“문서”: 이 용어는 웹 브라우저에 로드되는 웹 페이지를 의미합니다. 제목, 단락, 이미지, 링크, 양식 등과 같은 요소를 포함하여 웹 페이지 콘텐츠의 구조화된 계층 구조를 나타냅니다. DOM 문서는 본질적으로 페이지가 로드될 때 브라우저의 렌더링 엔진에 의해 생성된 웹 페이지 구조의 메모리 내 표현입니다.

이제 브라우저 엔진이 문서를 페인팅용 DOM으로 알려진 노드 트리로 변환하는 방법에 대한 흥미로운 부분이 나옵니다.

문서를 다운로드한 후 원시 데이터(예, 0과 1)로 변환됩니다. 그리고 이 원시 데이터 바이트는 문자로 변환됩니다. 이 변환은 HTML 파일의 문자 인코딩을 기반으로 수행됩니다.

이러한 문자는 토큰이라는 것으로 추가로 구문 분석됩니다. 다른 프로그래밍 언어 토큰과 마찬가지로 의미 있는 프로그래밍 언어의 가장 작은 개별 요소로 정의할 수 있습니다. 여기서 토큰은 HTML의 태그, 즉 body,h1,h2, p,스팬 등

토큰화가 완료되면 다음 단계는 이러한 토큰을 구조화하는 것입니다. 이것이 객체가 작동하는 곳입니다. 객체는 이러한 토큰으로 생성되며, 이러한 객체에는 태그 시작, 태그 끝, 속성, 데이터/값 등을 포함하여 각 엔터티에 대한 많은 정보가 포함됩니다.

이제 '문서'와 '개체'가 있지만 이러한 개체 사이에 관계가 없기 때문에 여전히 구조화되어 있지 않습니다. 토큰화 후 이러한 토큰은 노드로 변환됩니다. 각 노드는 상위, 하위 및 형제 노드를 특징으로 하는 다른 노드와 관계를 갖습니다. 이러한 노드 간 관계는 친숙한 트리형 구조를 형성합니다. 이 프로세스는 객체 트리 모델링으로 알려져 있습니다. 이제 HTML 문서에서 노드 트리 모델을 준비하고 그릴 준비가 되었습니다.

요약하자면 "문서 개체 모델"이라는 이름은 그 목적과 기능을 반영합니다. 이는 개체 컬렉션으로 표현되는 웹 페이지 콘텐츠의 구조화된 모델 역할을 합니다. "DOM"이라는 이름은 "Document"(웹 페이지), "Object"(요소를 나타냄) 및 "Model"(구조적 표현)을 융합하여 탄생했습니다.

이 정보가 도움이 되기를 바랍니다. 언제든지 피드백을 제공하거나 구체적인 질문이나 우려 사항이 있는 경우 문의하시기 바랍니다.