개발자 사전: DOM

이 게시물은 개발자 사전이라는 리소스의 일부입니다. 이 글을 쓰는 이유에 대해 자세히 알아보기here


나무를 상상해보십시오. 나뭇가지와 나뭇잎이 나무에 매달려 있다고 상상해 보십시오. 이제 이 텍스트를 읽는 데 사용하는 것과 같은 브라우저 내의 웹 페이지를 상상해 보십시오. 페이지의 모든 내용을 살펴보십시오. 제목, 단락, 이미지, 링크. 그것들은 마치 나무의 잎과 가지처럼 서로 연결되어 있습니다. 트리의 루트는 html이라는 HTML 요소이고 루트 '아래'에는 head와 body라는 요소가 있습니다. 읽고 있는 텍스트는 아마도 일부 div 요소 내부의 p 요소에 있을 것입니다. (이 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'를 선택한 다음 한 번도 본 적이 없다면 살펴볼 수 있습니다.) 깊은 계층 구조에 중첩된 많은 요소가 있습니다. 그것의 요점은 다음과 같습니다.



각 색상은 이 논리적 트리 내 계층 구조의 다른 수준에 있는 요소를 나타냅니다. 요소가 서로 어떻게 관련되어 있는지에 대해 이야기하는 데 사용되는 몇 가지 일반적인 용어가 있습니다. 머리와 몸은 형제입니다. 그들은 html의 자식입니다. main은 헤더와 섹션 등의 부모입니다.

이제 머릿속에 구체적인 이미지가 생겼으니 이와 같이 트리의 요소를 나타내는 이점이 무엇인지 물어볼 수 있습니다.

그래서 뭐? 이것은 어떻게 사용됩니까?

모든 요소는 어떤 방식으로든 구성되어 있어 참조할 수 있고 그중 하나 또는 일부로 선택적으로 작업을 수행할 수 있습니다.

DOM의 개념은 트리에 대한 프로그래밍 방식의 액세스를 허용합니다. 계층 구조를 탐색하고 특정 요소를 쉽게 선택할 수 있는 메서드가 있습니다. 그런 다음 프로그래머는 선택한 요소로 콘텐츠 변경, 모양 변경, HTML, CSS 및 JavaScript와의 상호 작용 추가 등의 작업을 수행할 수 있습니다.

CSS 예제

CSS는 DOM 및 선택기 개념을 사용하여 특정 HTML 요소를 스타일로 지정합니다.

p:first-child {
  font-size: 15px;
}

div > p {
  color: green;
}

첫 번째는 "부모 요소의 첫 번째 자식인 모든 단락을 찾고 글꼴 크기를 15로 변경합니다"라고 말합니다.

두 번째는 "div 요소의 자식인 모든 단락을 찾고 색상을 녹색으로 변경합니다"라고 말합니다.

자바스크립트 예제

JavaScript에서 DOM 및 선택기의 개념은 특정 요소(예: 사용자 클릭 버튼)의 이벤트를 '수신'하는 데 사용됩니다.

document.getElementById("myButton").addEventListener("click", doSomethingWithButtonClick);

이것은 "id가 ​​'myButton'인 요소를 선택하고 클릭할 때 주어진 함수 'doSomethingWithButtonClick'을 호출할 계획"이라고 말합니다.

HTML 예제

HTML DOM에는 DOM 트리에 요소를 삽입하거나 제거하고 일부 요소의 내용을 업데이트할 수 있는 메서드가 있습니다. 예: document.createElement(이름), parentNode.appendChild(노드), element.innerHTML. 그들은 이름이 말하는 대로 합니다.

document.getElementById("foo").innerHTML = "Text changed!";

이것은 "id가 ​​'foo'인 요소를 선택하고 표시 텍스트를 변경하십시오"라고 말합니다.


이제 DOM이라는 것의 본질을 알게 되었습니다. 아 그리고 그 약어는 Document Object Model을 의미합니다. 그러나 당신은 이미 그것을 알고 있었습니다. '문서', '객체', '모델'이라는 명사만 아는 것은 의미가 없습니다. 그러나 마음속에 시각적 이미지를 갖고 그것이 어떻게 사용되는지에 대한 구체적인 예를 보면 이 개념을 유지하고 이미 알고 있는 다른 것들과 연결할 수 있습니다.