등과 같은 HTML 태그를 나타냅니다.
노드: DOM 트리의 기본 단위로 요소, 텍스트 또는 속성이 될 수 있습니다.
DOM 트리: 웹페이지를 노드 트리로 표현하는 계층 구조입니다. 루트 노드는 문서이고 각 HTML 요소는 문서에서 분기되는 노드입니다.
DOM 표현의 예:
다음과 같은 HTML 문서의 경우:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>The DOM for this document might look like this:<br>
</p>
<pre class="brush:php;toolbar:false">Document
├── html
├── head
│ └── title
└── body
└── div#content
├── h1
└── p
JavaScript가 DOM을 사용하는 방법:
-
요소 액세스: JavaScript는 document.getElementById() 또는 document.querySelector()와 같은 메서드를 사용하여 DOM에서 요소를 선택하고 액세스할 수 있습니다.
let heading = document.getElementById("content");
-
요소 조작: JavaScript는 요소의 콘텐츠, 속성 또는 스타일을 수정할 수 있습니다.
heading.innerHTML = "New Content";
heading.style.color = "red";
-
이벤트 처리: JavaScript는 이벤트 리스너를 DOM 요소에 연결하여 클릭, 키 누르기 등과 같은 사용자 작업에 응답할 수 있습니다.
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
-
요소 생성 및 제거: JavaScript는 동적으로 새 요소를 생성하거나 기존 요소를 제거할 수 있습니다.
const newElement = document.createElement("div");
document.body.appendChild(newElement);
DOM이 중요한 이유:
- JavaScript가 웹페이지의 구조 및 콘텐츠와 상호 작용하고 조작할 수 있는 방법을 제공합니다.
- 페이지를 다시 로드할 필요 없이(예: UI 업데이트 또는 사용자 입력 처리) 동적 대화형 웹페이지를 허용합니다.
DOM 메소드:
다음은 JavaScript에서 일반적으로 사용되는 DOM 메소드입니다.
-
getElementById(): ID로 요소를 선택합니다.
-
querySelector(): CSS 선택기를 사용하여 첫 번째로 일치하는 요소를 선택합니다.
-
createElement(): 새로운 HTML 요소를 생성합니다.
-
appendChild(): 요소에 새 하위 노드를 추가합니다.
-
RemoveChild(): 요소에서 하위 노드를 제거합니다.
-
setAttribute(): 요소에 속성을 설정합니다.
-
addEventListener(): 요소에 이벤트 핸들러를 연결합니다.
실제 사례:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>The DOM for this document might look like this:<br>
</p>
<pre class="brush:php;toolbar:false">Document
├── html
├── head
│ └── title
└── body
└── div#content
├── h1
└── p
이 예에서는 h1 요소가 선택되고 해당 콘텐츠가 업데이트되며 클릭 이벤트 리스너가 연결됩니다. 제목을 클릭하면 알림이 표시됩니다.
DOM은 JavaScript로 웹페이지의 구조를 동적으로 조작하기 위한 필수 개념이며, 대화형 웹 애플리케이션을 만드는 데 기본이 됩니다.
위 내용은 JavaScript에서 DOM(Document Object Modle)이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
