DOM이란 무엇인가요?
문서 개체 모델(DOM)은 웹에서 문서의 구조와 내용을 구성하는 개체의 데이터 표현입니다. 웹사이트의.
평신도의 관점에서 DOM은 웹사이트의 구조를 나타냅니다.
DOM은 여러 가지 이유로 중요합니다. React와 Vue는 모두 virtual DOM to optimize applications을 사용합니다.
또한 웹 구성 요소는 때때로 shadow DOMs을 사용합니다.
DOM 논리적 트리
문서 개체 모델을 논리적 트리로 생각할 수 있습니다.
where the DOM comes from을 읽거나 다음 부분으로 건너뛸 수 있습니다.
DOM 트리, Wikipedia의 표현입니다.
또한 트리의 각 분기는 노드에서 끝납니다. 각 노드는
개체를 포함하는 노드
즉, 각 노드는 프로그래밍 방식으로 액세스할 수 있는 HTML 요소를 포함할 수 있습니다.
인터페이스를 사용하면 트리에 프로그래밍 방식으로 액세스할 수 있습니다. 이를 사용하여 문서의 구조, 스타일 또는 내용을 변경할 수 있습니다. 여기 몇 가지 예가 있어요.
이벤트 핸들러가 있는 노드
또한 위에 제시된 동일한 인터페이스에는 문서 객체 모델 조작을 트리거할 수 있는 이벤트 핸들러가 있습니다.
웹 페이지를 조작하고 생성하는 데 사용할 수 있는 모든 속성, 메서드 및 이벤트는 개체로 구성됩니다. MDN.
개발자 콘솔을 열고 네트워크 탭 내부를 살펴볼 수 있습니다. this post에서 설명한 것처럼 페이지를 새로 고칠 때 얻을 첫 번째 파일은 실제로 문서입니다!
JavaScript에서 DOM이란 무엇입니까?
명확히 하자면 문서 개체 모델은 특정 프로그래밍 언어와 독립적으로 설계되었기 때문에 JavaScript나 Python이 아닙니다.
"JavaScript에서 DOM이 무엇인가요?"말도 안돼.
이 선택 덕분에 원하는 경우 Python, JavaScript 및 기타 언어로 문서 개체 모델에 액세스할 수 있습니다.
JavaScript 및 Python과 같은 언어는 일반적으로 프로그램이나 브라우저에서 실행할 수 있는 스크립트로 작성됩니다.
다음은 HTML 문서 내에서 JavaScript 스크립트가 어떻게 보이는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<h1>A nice title here</h1>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "Hello!";
</script>
</body>
</html>
일반적으로 페이지 구조(HTML)를 DOM 조작(JavaScript)과 분리하여 유지하려고 합니다.
이러한 이유로
script 요소는 위의 예와 같이 스크립팅 문을 포함하거나 src 특성을 통해 외부 스크립트 파일을 가리킵니다.주요 테이크 아웃
결론적으로 기억해야 할 몇 가지 사항을 언급할 가치가 있습니다.
Reference
이 문제에 관하여(DOM이란 무엇인가요?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/this-is-learning/what-is-the-dom-14md텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
