문서 개체 모델이 단순화되었습니다.

안녕하세요? 친구들, 내 블로그에 오신 것을 환영합니다. 오늘은 DOM의 개념을 단순화해 보겠습니다.

소개

내가 웹 개발자로 일을 시작했을 때 업계에서는 "DOM"이라는 용어를 자주 사용했습니다. 모든 JavaScript 튜토리얼에서 이를 언급했지만 저는 그것이 무엇을 의미하는지 몰랐습니다. DOM에 대한 간단한 설명을 찾아보니 고급 프로그래밍 용어와 혼동된 탐색 결과가 있었습니다. 오랜 검색끝에 이제 이해가 되셨으니, 이전 상황에서 더 간단한 설명으로 다른 분들께 도움을 드리는 것이 현명하다고 생각했습니다.

설명

DOM이라는 용어를 처음 들었을 때 가장 먼저 무엇이 떠오르셨나요?

1. 문서

2. 객체

3. 모델
   
   무슨 뜻인가요?

---

문서란 무엇입니까?

웹 문서는 일반적으로 간단한 HTML 파일로 정의됩니다. 이 페이지와 같은 웹 문서는 일반적으로 여러 파일로 구성되며 URL(Uniform Resource Locator)을 통해 액세스됩니다. HTML 파일 자체에는 대부분의 시간 스타일 시트, 배경 이미지, 기타 그래픽, Java 프로그램 및 기타 파일이 포함되어 있습니다.

문서는 HTML 파일입니다.

문서가 객체 형태로 로드되면 브라우저로 전송됩니다."객체 ??"

객체란 무엇입니까?

객체는 프로그래밍에서 자주 듣는 용어로, 객체에 대한 이해가 자바스크립트의 좋은 시작입니다.

JavaScript의 개체는 “키: 값” 쌍 형식으로 기본 또는 참조 유형의 관련 데이터를 순서 없이 모아 놓은 것으로 정의될 수 있습니다. 이러한 키는 변수 또는 함수일 수 있으며 객체 컨텍스트에서는 각각 속성 및 메서드라고 합니다. 선택적 속성 목록과 함께 그림 괄호 {…}를 사용하여 객체를 생성할 수 있습니다. 속성은 "키:값" 쌍입니다. 여기서 키는 문자열("속성 이름"이라고도 함)이고 값은 무엇이든 될 수 있습니다.

let object = {
Key: Value
}

객체는 모든 요소를 ​​노드라 하여 그래픽적으로 트리 형태로 표현되며, HTML 구문 배열을 기준으로 노드를 그룹화하여 부모-자식 관계를 맺고 있습니다.

<div> <!-- parent element-->
<p><!-- child element to div element-->
<!-- text is also referred to as a node -->
Paragraph text <!-- child element top element-->
</p> 
</div>

참고: DOM을 사용하는 대부분의 코드는 HTML 문서 조작을 중심으로 이루어지기 때문에 엄밀히 말하면 모든 노드가 요소는 아니지만 DOM의 노드를 요소로 참조하는 것이 일반적입니다.

브라우저 리더 문서에는 그래픽으로 트리로 표현될 수 있는 객체가 있습니다. ** 그렇다면 모델이란??**

모델은 무엇입니까:

이것을 사전적인 관점에서 살펴보겠습니다.

1. 일반적으로 어떤 것의 축소판입니다. 예:- 인간 심장의 플라스틱 모형 2. 만들어질 무언가의 패턴.자세히 보기

모델의 사전적 정의를 이해하고 이를 웹페이지에 연관시키면 브라우저에서 생성된 객체를 텍스트, 색상, 이미지, 등이 정리되어 시청자에게 제시됩니다. 그래서 이것을 웹 문서를 받아 컴파일한 결과라고 부르겠습니다.

결론

*이렇게 보자 *

$$ 수신 ⇾ 대류 ⇾ 프리젠테이션 $$

웹페이지는 처음으로 로드될 때마다, 그리고 새로 고칠 때마다 이 간단한 프로세스를 통과합니다.

수신:- 서버나 로컬 컴퓨터에서 문서를 수신하고

대류:- 문서를 읽고 각 요소를 노드로 변환

프레젠테이션:- 사용자에게 표시되도록 설계된 웹페이지에 생성된 개체 또는 트리를 나타냅니다.

이 경우 문서가 변경되어도 모듈에는 직접적인 영향이 없습니다. 문서가 저장되고 브라우저는 수신된 수신 문서의 새 개체를 생성한 다음 모델을 다시 생성하거나 수정합니다.

---

축하해요

** 와, 정말 멋진 여행이군요. 이 기사를 끝까지 마치셨다니 다행입니다.**

---

마무리 및 피드백 ?

시간을 내어 이 기사를 읽어주셔서 감사합니다! 주제를 단순화하고 귀중한 통찰력을 얻는 데 도움이 되기를 바랍니다. 도움이 되셨다면 저를 팔로우하여 웹 개발 및 기타 기술 주제에 대해 더 쉽게 이해할 수 있는 콘텐츠를 찾아보세요.

여러분의 피드백이 중요합니다! 제안, 질문, 개선했으면 하는 영역 등 의견 섹션에서 여러분의 생각을 공유해 주세요. 반응 이모티콘을 사용하여 이 기사를 보고 어떤 느낌을 받았는지 알려주세요. ?

---

연결 상태를 유지하시겠습니까?

이것은 제 블로그 활동의 시작일 뿐입니다. 여러분과 소통하고 싶습니다! 함께 아이디어를 공유하고, 성장하고, 배워봅시다.

저를 팔로우하고 계속 연락하세요:

• 지저귀다
• 링크드인

여러분의 의견을 듣고 이 호기심 많은 커뮤니티가 성장하기를 기대합니다! ?

위 내용은 문서 개체 모델이 단순화되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!