DOM
문서 객체 모델(Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식
쉽게 설명해서 줄글로 되어 있는 문서를 트리처럼 만들어주는 것이다.
DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스를 제공한다. 또한, 문서의 구조화된 표현(Structured Representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.
DOM의 종류는
- Core DOM : 모든 문서 타입을 위한 DOM모델
- HTML DOM: HTML 문서를 위한 DOM모델
- XML DOM: XML 문서를 위한 DOM모델
여기서 HTML DOM을 자주 사용하게 될 것이다.
HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법이다. 모든 요소는 HTML DOM을 통해 접근 가능하다.
Document 객체는 웹 페이지를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
Document 메소드
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
새로운 HTML 요소를 선택하기 위해 제공되는 메소드
| 메소드 | 설명 |
| document.getElementById() | 해당 아이디의 요소를 선택 |
| document.getElementByClassName() | 해당 클래스에 속한 요소를 모두 선택 |
| document.getElementByName() | 해당 name 속성값을 가지는 요소를 모두 선택 |
| document.querySelectorAll() | 해당 선택자로 선택되는 요소를 모두 선택 |
| document.querySelector() | 해당 선택자로 선택되는 요소를 1개 선택 |
HTML 요소의 생성
| 메소드 | 설명 |
| document.createElement() | 지정된 HTML 요소를 생성 |
| document.write() | HTML 출력 스트림을 통해 텍스트를 출력 |
HTML 이벤트 핸들러 추가
| 속성 | 설명 |
| 요소.onclick = function( ){ } | 마우스 클릭 이벤트와 연결된 이벤트 핸들러 |
DOM의 트리구조 ( HTML -> DOM)
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 기초</title>
</head>
<body>
<article>
<header>header</header>
<section>
<header>header 1</header>
section 1
</section>
</article>
</body>
</html>
'Web > JavaScript' 카테고리의 다른 글
| 3.3 - 노드(Node)와 노드 트리 (0) | 2024.02.28 |
|---|---|
| 3.2 - 자바스크립트(JavaScript)와 DOM (0) | 2024.02.28 |
| 2.4 - 자바스크립트(JavaScript) 활용 (0) | 2024.02.28 |
| 2.3 - 자바스크립트(JavaScript) 반복문 (0) | 2024.02.28 |
| 2.2 - 자바스크립트(JavaScript) 조건문 (0) | 2024.02.28 |
