DOM과 Node

문서 객체 모델(DOM: Document Object Model)

• HTML 문서 또는 XML 문서 등을 접근하기 위한 일종의 인터페이스 역할
• 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공

 

document 객체

• 웹 페이지 자체(body)를 읨하는 객체
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작
  
  
• getElementById(): 해당 아이디의 요소를 선택
• getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
• getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
• getElementsByName(): name 속성값을 가지는 요소를 모두 선택
• querySelectorAll(): 선택자로 선택되는 요소를 모두 선택
• querySelector(): 선택자로 선택되는 요소를 선택

 

---

노드(Node)

• HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장

 

노드 종류

• 문서노드: 문서 전체를 나타내는 노드
• 요소노드: HTML 요소는 요소노드, 속성노드를 가질 수 있음
• 속성노드: 속성은 모두 속성노드이며, 요소노드에 관한 정보를 가짐
• 텍스트노드: 텍스트는 모두 텍스트노드
• 주석노드: 주석은 모두 주석노드

 

노드의 관계

• parentNode: 부모 노드
• children: 자식
• childNodes: 자식 노드 리스트
• firstChild: 첫번째 자식 노드(모든 종류의 노드)
• firstElementChild: 첫번째 자식 요소 노드(요소노드만 찾음)
• lastChild: 마지막 자식 노드
• lastElementChild: 마지막 자식 요소 노드
• nextSibling: 다음 형제 노드
• previousSibling: 이전 형제 노드

 

노드 추가

• appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
• insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
• insertData(): 새로운 노드를 텍스트 데이터로 추가

 

노드 생성

• createElement(): 새로운 요소 노드를 만듦
• createAttribute(): 새로운 속성 노드를 만듦
• createTextNode(): 새로운 텍스트 노드를 만듦

 

노드 제거

• removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다같이 제거
• removeAttribute(): 특정 속성 노드를 제거

 

노드 복제

• cloneNode(): 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환