문서 - DOM 트리, DOM 탐색하기

devheyrin·2022년 7월 5일

browser

목록 보기
1/1

DOM 이란?

  • 문서 객체 모델(Document Object Model)의 약자로, 객체 지향 모델로써 구조화된 문서를 표현하는 형식
  • 웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다.
  • html 문서에 대한 인터페이스 : 문서의 구조화된 표현을 제공하여 프로그래밍 언어로 문서구조, 스타일, 내용등을 변경할 수 있도록 한다.
  • DOM은 브라우저만을 위한 모델이 아니다. html 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용한다.

Document 객체

Document 객체는 웹페이지를 의미한다. 웹페이지에 존재하는 HTML요소에 접근하려면 Document 객체부터 시작해야한다.

document 객체는 페이지의 기본 ‘진입점’ 역할을 하고, document 객체를 이용해 페이지 내의 모든 요소를 변경할 수 있다.

Document 메소드

html 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

  • html 요소의 선택
  • html 요소의 생성
  • html 이벤트 핸들러 추가
  • html 객체의 선택

html 요소의 선택

document.getElementByID()
document.getElementByClassName()
document.getElementByName() // 해당 name 속성값을 가지는 요소를 선택

html 요소의 생성

document.createElement('body') 
document.write() // html 출력 스트림을 통해 텍스트를 출력

html 이벤트 핸들러 추가

요소.onclick = function(){} // 마우스 클릭 이벤트에 이벤트 핸들러를 연결

DOM 명세서

DOM

HTML 명세서

HTML

Node 객체

노드와 노드 트리

html dom에서 정보를 저장하는 계층적 단위.

노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.

자바스크립트는 html dom 을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드 간의 관계

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

노드의 종류

  • 문서 노드 : html 문서 전체를 나타내는 노드
  • 요소 노드 : html 문서에 포함된 모든 태그. 속성 노드를 가질 수 있는 유일한 노드
  • 주석 노드 : html 문서의 모든 주석 (거의 사용하지 않는다)
  • 속성 노드 : 모든 html 요소의 속성. 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식노드에는 포함되지 않는다. ?
  • 텍스트 노드 : html 문서의 모든 텍스트

노드의 값

nodeName(이름), nodeValue(값), nodeType(타입) 프로퍼티로 접근할 수 있다.

DOM 탐색하기

documentElement 와 body

DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있다.

<html> = document.documentElement

<body> = document.body

  • document.body 는 스크립트 위치에 따라 null(존재하지 않음)일 수도 있다. 브라우저가 아직 body를 읽지 않은 시점에서 document.body를 참조하려고 하면 null이 된다.

<head> = document.head

자식 노드 탐색하기

  • 자식 노드 : 바로 아래의 자식 요소를 나타낸다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만든다.
  • 후손 노드 : 중첩 관계에 있는 모든 요소를 의미한다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 된다.
  • childNodes 컬렉션은 텍스트 노드를 포함한 모든 자식 노드를 담고 있다.
  • firstChild 첫 번째 자식 노드에 빠르게 접근할 수 있다.
  • lastChild 마지막 자식 노드에 빠르게 접근할 수 있다.

DOM 컬렉션

  • childNodes 는 마치 배열 같아 보이지만 배열이 아닌 반복가능한 유사 배열 객체인 컬렉션(collection)이다. 따라서 아래와 같은 특징을 가진다.

    • for .. of 를 사용할 수 있다.

    • 배열이 아니기 때문에 배열 메서드를 쓸 수 없다. 배열 메서드를 적용하고 싶다면 Array.from 을 적용해야 한다.

      alert( Array.from(document.body.childNodes).filter ); // function
  • DOM 컬렉션을 비롯해 모든 탐색용 프로퍼티는 읽기 전용으로, 자식 노드를 교체하는 데 사용할 수는 없다. DOM을 변경하려면 다른 메서드가 필요하다.
  • DOM 컬렉션은 살아있다. (현재 상태를 반영한다) 즉, elem.childNodes 를 참조하고 있는 도중에 새로운 노드가 추가되거나 삭제되면, 변경사항이 컬렉션에도 자동으로 반영된다.

형제와 부모 노드

같은 부모를 가진 노드를 형제 노드라고 한다.

이전 형제 노드에 대한 정보는 previousSibling 에서,

다음 형제 노드에 대한 정보는 nextSibling 에서 찾을 수 있다.

부모 노드에 대한 정보는 parentNode 를 이용해 참조할 수 있다.

요소 간 이동

실무에서는 웹 페이지를 구성하는 태그의 분신인 ‘요소 노드'를 조작하는 작업이 대다수이다.

요소 노드를 탐색하기 위한 프로퍼티는 다음과 같다.

  • children 해당 요소의 자식 노드 중 요소 노드만을 가리킨다.
  • firstElementChild와 lastElementChild 프로퍼티는 각각 첫 번째 자식 요소 노드와 마지막 자식 요소 노드를 가리킨다.
  • previousElementSibling과 nextElementSibling은 형제 요소 노드를 가리킨다.
  • parentElement 는 부모 요소 노드를 가리킨다.

parentElement vs parentNode

parentElement 프로퍼티는 부모노드 중 ‘요소 노드'를 반환하고,

parentNode 프로퍼티는 모든 부모 노드를 반환한다.

대부분의 경우 두 프로퍼티는 같은 노드를 반환하지만, 아래와 같은 예외도 있다. 

document.documentElement.parentNode // document
document.documentElement.parentElement // null

<html>에 해당하는 document.documentElement 의 부모는 document 인데, document 는 요소 노드가 아니기 때문에 parentElement 는 null 을 반환한다.

테이블 탐색하기

일부 DOM 요소는 편의를 위해 기본 프로퍼티 외에 추가적인 프로퍼티를 지원하는데, 대표적으로 테이블이 있다.

요소는 기본 프로퍼티 이외에 다음 프로퍼티들을 지원한다.

  • table.rows는 <tr>요소를 담은 컬렉션을 참조한다.
    • <thead>, <tfoot>, <tbody> 요소 또한 rows 프로퍼티를 지원한다.
  • table.caption/tHead/tFoot은 각각  <caption>, <thead>, <tfoot> 요소를 참조한다.
  • table.tBodies는 <tbody> 요소를 담은 컬렉션을 참조한다. 표준에 따르면, 테이블 내에 여러 개의 <tbody>가 존재하는 게 가능한데, 최소한 하나는 무조건 있어야 한다. HTML 문서에는 <tbody>가 없더라도 브라우저는 <tbody> 노드를 DOM에 자동으로 추가한다.

<tr> 요소는 다음 프로퍼티를 지원한다.

  • tr.cells는 주어진 <tr> 안의 모든 <td>, <th>을 담은 컬렉션을 반환한다.
  • tr.sectionRowIndex는 주어진 <tr>이 <thead>/<tbody>/<tfoot>안쪽에서 몇 번째 줄에 위치하는지를 나타내는 인덱스를 반환한다.
  • tr.rowIndex는 <table>내에서 해당 <tr>이 몇 번째 줄인 지를 나타내는 숫자를 반환한다.

<td>와 <th> 요소는 다음 프로퍼티를 지원한다.

  • td.cellIndex는 <td>나 <th>가 속한 <tr>에서 해당 셀이 몇 번째인지를 나타내는 숫자를 반환한다.
profile
devheyrin
개발자 헤이린 🔜 프로덕트 매니저로 나아가는 중!

0개의 댓글