DOM- 남성문서 유럽물체 쌀오델
(windows.문서)
BOM – 두번째노 젓는 사람 유럽물체 쌀오델
(창 위치),
(창.네비게이터),
(윈도우 스크리닝),
(창.역사)
.
.
.
1) 재료 명세서
– 모든 서비스는 웹 브라우저를 기반으로 실행되기 때문에 웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다.
– 이 브라우저와 관련된 개체 집합은 BOM(브라우저 개체 모델)입니다. – 이 BOM을 사용하여 브라우저 관련 기능을 구성합니다.
– DOM은 BOM 중 하나입니다.
– BOM의 최상위 개체는 창 개체입니다.
-창문.위치
– 윈도우 네비게이터
-창문 가리기
– 윈도우 히스토리
-…
– DOM은 창 개체의 자식 개체입니다.
– window.document 객체는 DOM으로 분류됩니다.
2) DOM
– 문서 개체 모델의 약어. 문서 개체 모델
– 우리가 웹사이트를 방문하면 웹 브라우저가 HTML 문서를 읽고 해석합니다.
– 브라우저가 HTML 코드를 해석하는 과정을 “파싱”이라고 합니다.
– 분석 결과 및 해석 결과를 화면에 표시합니다.
렌더링은 해석된 HTML 코드를 화면에 표시하는 과정이며 그 결과 DOM이 생성됩니다.
– 브라우저는 HTML 코드를 해석하고 HTML 요소가 구조화되고 트리로 표시되는 웹 문서를 생성합니다.
이 전체 트리를 DOM이라고 하며 브라우저는 DOM을 사용하여 웹 페이지 콘텐츠를 화면에 렌더링합니다.
– 트리의 각 요소를 노드라고 합니다.
– 웹 페이지 요소는 각각 API이므로 JavaScript를 사용하여 제어할 수 있습니다.
– API는 소프트웨어 개발 호환성이 반드시 따라야 하는 추상적인 원칙입니다.
서로 통신할 수 있도록 응용 프로그램을 함께 연결하는 인터페이스 원칙으로 생각하십시오.
– DOM은 XML 또는 HTML 문서에 접근하기 위한 인터페이스로, 문서의 모든 요소를 정의하고 각 요소에 접근할 수 있는 메소드를 제공합니다.
3) 웹 페이지 생성 방법 :
공동 연구 프로그램 – CRP(Critical Rendering Path): 웹 브라우저가 원본 HTML 문서를 읽은 후,
스타일을 지정하고 페이지를 대화형으로 만들고 뷰포트에 표시하는 프로세스
– DOM 트리 구축
– CSSOM 트리 구축
– JS 실행
– 렌더 트리 구축
– 레이아웃 생성
– 그림
– CRP 프로세스를 단순화하여 렌더링 트리를 시작점으로 구축하고 두 단계로 나눕니다.
– 1단계: 브라우저는 로드된 문서를 구문 분석하고 최종적으로 페이지에 무엇을 렌더링할지 결정합니다.
(렌더링 트리 생성)
– 2단계: 브라우저가 렌더링을 수행합니다.
– 렌더 트리: 웹 페이지에 표시되는 HTML 및 스타일 요소로 구성됩니다.
브라우저는 렌더 트리를 생성하기 위해 이 두 모델이 필요합니다.
– *DOM(문서 개체 모델)* : HTML 요소의 구조화된 표현
– *CSSOM(Cascading Style Sheet 객체 모델)* : 요소와 관련된 스타일 정보의 구조화된 표현
4) DOM의 목적
– DOM의 목적은 JavaScript를 사용하여 문서를 스크립팅하는 것입니다.
즉, 문서의 각 요소에 대해 JavaScript로 여러 작업을 수행할 수 있습니다.
– 뷰포트에서 렌더링할 항목을 결정하는 데 사용됩니다.
– JavaScript는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
– JavaScript는 기존 HTML 요소 또는 속성을 제거할 수 있습니다.
– JavaScript는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
– JavaScript는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
– JavaScript는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
– JavaScript는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
– JavaScript는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
– HTML 코드는 정적 텍스트이기 때문에 DOM의 존재는 웹 화면이 사용자와 동적으로 상호 작용하는 데 중요합니다.