)를 나타냅니다.
텍스트 노드: 요소 내의 텍스트를 나타냅니다.
속성 노드: 요소의 속성(예: 클래스, ID)을 나타냅니다.
댓글 노드: HTML의 댓글을 나타냅니다.
예제 DOM 트리
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
로그인 후 복사
DOM 표현:
Document
├── html (Element)
│ ├── head (Element)
│ │ └── title (Element)
│ │ └── "My Page" (Text)
│ └── body (Element)
│ ├── h1 (Element)
│ │ └── "Hello, World!" (Text)
│ └── p (Element)
│ └── "This is a paragraph." (Text)
로그인 후 복사
DOM에 접근하기
요소 선택
-
getElementById: ID로 단일 요소를 선택합니다.
const element = document.getElementById('myId');
로그인 후 복사
-
getElementsByClassName: 지정된 클래스 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.
const elements = document.getElementsByClassName('myClass');
로그인 후 복사
-
getElementsByTagName: 지정된 태그 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.
const elements = document.getElementsByTagName('div');
로그인 후 복사
-
querySelector: CSS 선택기와 일치하는 첫 번째 요소를 선택합니다.
const element = document.querySelector('.myClass');
로그인 후 복사
-
querySelectorAll: CSS 선택기와 일치하는 모든 요소의 정적 NodeList를 반환합니다.
const elements = document.querySelectorAll('div.myClass');
로그인 후 복사
요소 조작
const element = document.getElementById('myId');
element.textContent = 'New Content';
로그인 후 복사
const element = document.getElementById('myId');
element.setAttribute('class', 'newClass');
로그인 후 복사
const element = document.getElementById('myId');
element.style.color = 'blue';
로그인 후 복사
const newElement = document.createElement('div');
newElement.textContent = 'I am a new div';
document.body.appendChild(newElement);
로그인 후 복사
const element = document.getElementById('myId');
element.parentNode.removeChild(element);
로그인 후 복사
DOM 이벤트
이벤트는 브라우저에서 발생하는 작업 또는 발생이며, 이벤트 핸들러를 사용하여 이에 응답할 수 있습니다.
이벤트 리스너 추가
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
로그인 후 복사
공통 이벤트
-
클릭: 요소를 클릭할 때 트리거됩니다.
-
mouseover: 마우스를 요소 위로 가져갈 때 트리거됩니다.
-
keydown: 키를 누를 때 트리거됩니다.
-
제출: 양식이 제출되면 트리거됩니다.
결론
웹 페이지와 상호 작용하고 조작하는 방법을 제공하는 DOM을 이해하는 것은 웹 개발에 필수적입니다. DOM 조작을 마스터하면 동적인 대화형 웹 애플리케이션을 만들 수 있습니다.
문서에 대해 더 자세히 알아보고 DOM API에서 사용할 수 있는 다양한 메서드와 속성을 실험해 보세요. 즐거운 코딩하세요!
위 내용은 DOM(문서 개체 모델) 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
