🔸 학습내용
(1) 문서 객체 모델
1. DOM(Document Object Model)
- 문서 객체 모델(DOM)이란 : 자바스크립트를 이요해 웹문서에 접근하고, 제어할 수 있도록 웹문서의 각요소를 객체 형태로 처리하는 것(문서를 체계적으로 정리)
2. DOM 트리
- DOM은 웹 문서의 요소를 부모요소와 자식요소로 구분
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>타이틀</title>
</head>
<body>
<h1>dom tree</h1>
<img src="#" alt="#">
</body>
</html>- html 요소 : head, body의 부모요소
- body 요소 : h1, img의 부모요소
- DOM은 문서안의 요소뿐아니라 각요소에서 사용한 내용과 속성도 자식으로 나타낸다.
- 예를들어, body 태그안의 h1, img는 body의 자식요소이면서, h1의 내용인 'dom tree'의 부모가 된다.
- 이러한 구조를 나타내면 나무형태가 된다고해서 DOM트리라고 한다.
- 노드 : DOM트리의 각 항목들
- 루트노드 : DOM트리의 시작 부분인 html노드(나무의 뿌리에 해당한다해서 루트노드라 한다)
- DOM을 구성하는 기본단위
- 모든 HTML 태그는 요소(element)노드이다.
- HTML 태그에서 사용하는 텍스트 내용은 해당 요소 노드의 자식 노드인 텍스트 노드이다.
- HTML 태그에 있는 속성은 해당 요소 노드의 자식 노드인 속성 노드이다.
- 주석은 주석노드이다.
3. DOM에 접근하기
- HTML 요소를 저장하는 메서드(DOM 트리의 텍스트, 속성 노드는 제어할 수 없다)
- getElementById() : id 선택자를 사용해 접근하기
- getElementsClassName() : class 선택자를 사용해 접근하기
- getElementsTagName() : 태그 이름을 사용해 접근하기
- DOM 트리의 텍스트, 속성 노드는 제어할 수있는 메서드
- querySelector(선택자)
- querySelectorAll(선택자 또는 태그)
4. 웹요소의 내용을 수정하는 프로퍼티
- innerText : 텍스트 내용을 표시
- innerHTML : 텍스트 내용에 HTML 태그 반영가능
5. 속성을 가져오거나 수정하는 메서드
- getAttribute("속성명")
- setAttribute("속성명", "값")
On your Mark