JavaScript DOM이란?

▶ DOM을 알아보기 전 - BOM이란?

웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 이러한 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델 (BOM: Browser Object Model)이라고 부른다. 이 BOM을 이용해서 브라우저와 관련된 기능들을 구성한다. 앞으로 알아볼 DOM은 이 BOM 중의 하나이다. BOM의 가장 최상위 객체는 window이며, DOM은 이 window 객체의 하위 객체이기 하다.

 

1. DOM( Document Object Model )이란?

Document (문서) + Object (객체) + Model( 모듈 )

즉, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하며 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미하기도 한다. 결론적으로는 웹 브라우저가 html 페이지를 인식하는 방식을 이야기하거나 문서 객체와 관련된 객체라고 볼 수 있다. 

 

자바스크립트는 DOM을 사용하여 웹 페이지의 모든 요소에 액세스할 수 있다. 실제로 웹 브라우저는 페이지가 로드되면 웹 페이지의 DOM을 생성하며, DOM 모델은 아래와 같이 개체의 트리로 작성된다. 이러한 DOM 트리는 네 종류의 노드로 구성된다.

 

 

DOM 트리 (출처: https://github.com/Lee-hyuna/33-js-concepts-kr/wiki/JavaScript-DOM-Tutorial-with-Example)

1) 문서노드 (Document Node)

• property : #document
• 최상위에 존재하는 노드
• 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서노드를 통해서 해야한다.

2) 요소노드 (Element Node)

• property : 태그 이름
• HTML 요소를 표현한다.
• HTML 요소는 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화 하여 문서의 구조를 서술한다.
• 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다.

3) 어트리뷰트 노드 (Attribute Node)

• property : 속성 이름
• HTML 요소의 어트리뷰트를 표현한다.
• 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

4) 텍스트 노드 (Text Node)

• property : #text
• 텍스트 노드는 HTML 요소의 텍스트를 표현한다.

 

정확하게는 브라우저의 렌더링 엔진은 웹 문서를 로드하고 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라고 한다. 모든 요소와 요소의 속성, 텍스트를 각각의 객체로 만들고 이러한 객체를 부자 관계로 표현할 수 있는 트리구조로 구성한 것이다. 이러한 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

 

<결론>

• 자바스크립트는 문법, 언어이며 DOM API가 없는 브라우저 밖에서 완전히 사용 가능하다.
• DOM은 브라우저 내에서 작동하고 존재한다.
• DOM은 파싱된 HTML이라고 말할 수 있다.
• 웹 페이지가 로드되면 브라우저는 DOM 페이지를 만든다.

※ 실제 소스를 통해 생성되는 DOM tree 예시 (https://goddaehee.tistory.com/237)

 

---

2. DOM 메소드

DOM에 접근하고, 조작하는 방법

 

2-1. 요소 선택 메소드

 

1) 한개의 요소 선택 (선택된 요소가 없는 경우 null 리턴)

- document.getElementById( ) : id값을 기준으로 요소 선택

- document.querySelector( ) : CSS 셀렉터를 사용하여 요소 선택 ( id = "#~" / class = ".~")

 

2) 여러개의 요소 선택

- document.getElementsByClassName ( ) : 해당 클레스에 속한 요소를 모두 선택하며, 공백을 기준으로 여러개의 클래스 지정 가능

- document.getElementsByName( ) : 해당 name속성 값을 가지는 요소를 모두 선택

- document.getElementsByTagName( ) : 해당 태그 이름의 요소를 모두 선택

 

2-2. 요소 생성 메서드

 

- document.createElement(tagName) : tagName에 맞는  HTML 요소를 생성

- document.createTextNode(Text) : 해당 text의 text 노드 요소를 생성

- document.write(text) : HTML 출력 스트림을 통해 텍스트를 출력

 

2-3. 기본 내장 함수

 

- document.cookie : HTML 문서의 쿠키(cookie)를 반환 한다.
- document.referrer : 링크(linking)되어 있는 문서의 URI를 반환 한다.
- document.URL : HTML 문서의 완전한 URL 주소를 반환 한다.

- document.anchors : name 속성을 가진 요소들을 반환한다.

- document.baseURI : 절대주소 기본 URI를 반한한다.
- document.documentURI : 문서의 URI를 반환한다.
- document.body : 요소를 설정하거나 반환한다.
- document.domain : HTML 문서를 로드한 도메인 서버의 네임(domain name)을 반환한다.
- document.doctype : HTML 문서의 타입(doctype)을 반환한다.
- document.documentElement : 도큐먼트 요소를 반환한다.
- document.documentMode : 도큐먼트 모드를 반환한다.
- document.forms : form요소를 모두 반환한다.
- document.images : img요소를 모두 반환한다.
- document.links : href 속성을 가지는 area요소와 a요소를 모두 반환한다.
- document.title : title 요소를 반환한다.
- document.embeds : embed요소를 모두 반환한다.
- document.head : head요소를 반환한다.
- document.implementation : DOMImplementation 객체를 반환한다.
- document.inputEncoding : 도큐먼트 인코딩(character set) 형식을 반환한다.
- document.lastModified : 도큐먼트 마지막 수정 날짜 및 시간을 반환한다.
- document.readyState : 도큐먼트의 로딩 상태(loading status)를 반환한다.
- document.scripts : script 요소를 모두 반환한다.
- document.strictErrorChecking : 에러 검사가 실행되었는지 설정하거나 반환한다.

 

2-4. 형제, 부모, 자식 노드 접근 방법

 

- parentNode : 부모 노드
- childNodes : 자식 노드 리스트(non-live, 텍스트 요소 포함)
  children : 자식 요소 중 Element type 요소만 반환 한다.(live)
- firstChild : 첫 번째 자식 노드를 반환한다.(텍스트 요소 포함)
  firstElementChild : 첫 번째 자식 엘리먼트를 반환한다.(Element type 요소만)
- lastChild : 마지막 자식 노드를 반환한다.(텍스트 요소 포함)
  lastElementChild : 마지막 자식 엘리먼트를 반환한다.(Element type 요소만)
- nextSibling : 다음 형제 노드를 반환한다.(텍스트 요소 포함)
  nextElementSibling : 다음 형제 요소 중 Element type 요소만 반환 한다.
- previousSibling : 이전 형제 노드를 반환한다.(텍스트 요소 포함)
  previousElementSibling : 이전 형제 요소 중 Element type 요소만 반환 한다.

2-5. 노드에 대한 접근 및 수정

 

- nodeName : 노드의 이름을 반환한다.
- nodeValue : 노드의 값을 반환하며, 텍스트 노드의 경우는 문자열, 요소 노드의 경우 null을 반환 한다.
- nodeType : 노드의 타입을 반환한다.

2-6. 어트리뷰트에 대한 접근 및 수정

- className : class 어트리뷰트의 값을 리턴하거나 변경할 수 있다.
- classList : add, remove, item, toggle, contains, replace 메소드를 제공한다.
- id : id 어트리뷰트의 값을 리턴하거나 변경할 수 있다.

2-7. HTML 조작

- innerHTML : 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정하며 해당 요소의 태그, 텍스트까지 전부 반환됨

- innerText : 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 가져오거나 설정하며 스타일이 적용된 요소라면 텍스트에 스타일이 적용되어 반환됨

 

---

※ 참고 출처

 

https://m.blog.naver.com/magnking/220972680805

[JavaScript] DOM이란 무엇인가?

https://goddaehee.tistory.com/237

[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델)