문서 객체 모델
문서 객체 모델(DOM)은 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법으로, Document Object Model의 약자이다. 즉, 웹 문서의 텍스트, 이미지, 표 등 모든 요소는 모두 객체이다.
DOM 트리
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.
<body>
<h1>h1태그입니다.</h1>
<p>p태그입니다.</p>
</body>
DOM은 body는 h1, p의 부모요소이고 h1, p는 body의 자식 요소로 구조화한다.
이 구조화된 그림을 DOM트리라고 부른다.
위의 그림에는 HTML 요소만 표현되어 있지만, DOM트리는 웹 문서의 HTML 요소만 표현하지는 않는다. HTML의 요소가 가지고 있는 텍스트, 이미지도 자식으로 간주하여 DOM트리에 표현한다.
위의 코드를 DOM트리로 나타내면 아래와 같다.
DOM 트리는 웹 문서 요소를 다음과 같이 표현한다.
- 웹 문서의 태그는 요소(Element) 노드로 표현한다.
- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트 노드로 표현한다.
- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성 노드로 표현한다.
- 주석은 주석 노드로 표현한다.
DOM 요소 접근
- DOM 요소를 id 선택자로 접근하는 함수
- getElementById()
- DOM 요소를 class 값으로 찾아내는 함수
- getElementsByClassName()
- getElementById()와는 달리 2개 이상의 웹 요소에 접근한다.
- HTMLCollection 값을 출력하며, 1개의 요소에만 접근하고 싶다면 아래와 같이 사용 가능
- getElementsByClassName(’name’)[0]
- DOM 요소를 태그 이름으로 찾아내는 함수
- getElementsByTagName()
- id나 class 선택자가 없는 DOM 요소에 접근하는 방법
- 2개 이상의 요소에 접근할 수 있다.
- HTMLCollection 값을 출력하면 1개의 요소에만 접근하고 싶다면 아래와 같이 사용 가능
- getElementsByTagName(’h1’)[0]
- DOM 요소를 다양한 방법으로 찾아주는 함수
- querySelector(), querySelectorAll()
- id, class, tag 모두 사용가능하다.
- id는 #, class는 . , 태그는 기호 없이 태그 이름만 사용하면 된다.
- querySelector(’#name’)
- NodeList로 반환함.
getElementById와 querySelector의 차이
getElementById는 DOM의 노드 중에서 요소 노드까지만 접근 가능
querySelector는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드까지 접근 가능
요소 가져오기
- HTML 태그 속성을 가져오거나 수정하는 함수
- getAttribute() : 속성에 접근하기
- setAttribute() : 속성의 값 수정하기
Combinators
1. descendant Combinator
하위 노드를 찾고 싶을 때 하위 합성자 문법을 사용한다.
document.querySelector('h1 h2');
이는 h1의 하위의 모든 h2 매치를 찾는다.
2. Child Combinator
자식 합성자, ">” : element의 자식 element
document.querySelectorAll('h1 > h2');
이는 h1 바로 아래 있는 h2를 찾는다.
3. General sibling Combinator
형제 노드 찾기, “~” : element의 형제노드 element 매치
document.querySelectorAll('h1 ~ h2');
이는 h1 element와 같은 부모를 공유하는 h2를 매치
4. Adjacent sibling Combinator
이웃 형제 노드 찾기, “+” : element의 이웃 형제 element
document.querySelectorAll('h1 + h2');
이는 h1 element에 이웃하는 h2 element를 선택
Pseudo
1. Pseudo classes
“:”으로 표현하며 element의 상태를 매치한다.
document.querySelectorAll('li:nth-child(2)');
li element들 중 두 번째를 매치한다.
2. Pseudo elements
“::”으로 표현하며 document에 포함되지 않은 엔티티를 나타낸다.
document.querySelector('p::first-line');모든 p element 중 첫 번째 줄에 있는 항목과 매치
DOM에 요소 추가하기
- createElement()
새로운 요소 노드를 만드는 함수var a = document.createElement('h3'); - createTextNode()
텍스트 노드를 만드는 함수var b = document.createTextNode('텍스트'); - appendChild()
요소 노드를 다른 요소 노드의 자식 노드로 연결할 때 사용하는 함수a.appendChild(b); - createAttribute()
요소에 속성을 만드는 함수var c = document.createAttribute('class'); c.value = '속성'; - setAttributeNode()
속성 노드를 요소 노드에 연결할 때 사용하는 함수a.setAttributeNode(c);
DOM트리로 원하는 노드 다루기
1. hasChildNodes()
특정 노드에 자식 노드가 있는지 확인하는 함수
자식 노드 있으면 true, 없으면 false 반환
2. childNodes()❗️
현재 노드의 자식 노드에 접근하는 함수
태그와 태그 사이의 줄 바꿈도 빈 텍스트 노드인 자식 노드로 인식
3. children
요소에만 접근하는 속성
HTMLCollection으로 반환함
4. insertBefore(추가하는 노드, 기준이 되는 노드)
부모 노드에 자식 노드를 추가할 때 기준이 되는 노드를 지정하고 그 앞에 자식 노드를 추가할 수 있음.
5. removeChild(자식 노드)
부모 노드에서 자식 노드를 삭제하는 함수
노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근해 부모 노드에서 삭제해야 한다.
- parentNode : 현재 노드의 부모 요소 노드를 반환
참고
https://sisiblog.tistory.com/236
Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편
'JavaScript' 카테고리의 다른 글
| [JavaScript] ES6 문법 정리 (0) | 2024.05.13 |
|---|---|
| [JavaScript] IIFE (즉시 실행 함수) (0) | 2023.04.06 |
| [TIL] querySelector와 getElementById의 차이점 (0) | 2023.04.05 |
