DOM(Document Object Model)
DOM이란 문서객체모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
즉 자바크스립트 같은 스크립팅 언어가 쉽게 웹피이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 합니다.
다시말해 문서객체란 <html>이나 <body>같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 말합니다.
DOM은 어떻게 생성되고 보여질까?
DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이도 합니다. 따라서 HTML DOM 혹은 HTML DOM Tree로 부르기도 합니다.
트리자료구조는 노드들의 계층 구조로 이루어져 있습니다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타냅니다.
document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute노드가 오는 계층적인 구조임을 알 수 있습니다. 이러한 노드 타입에는 총12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있습니다.
document node(문서노드)
Dom Tree에서 최상위 루트노드를 나타내며, document객체를 가리킵니다. HTML문서에 오로지 1개만 존재하며
window.document, document로 참조해 사용할 수 있습니다.
element node(요소노드)
모든 HTML요소(body,h2,div 등)은 요소노드입니다. 속성 노드르 가질 수 있는 유일한 노드로 부모-자식 관계를
가지게 되므로 계층적 구조를 이룹니다.
attribute node(속성노드)
모든 HTML요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보를 가지고 있습니다.
text node(텍스트노드)
텍스트 노드는 정보를 표현하며, 가장 마지막에 위치한 자식 노드이므로 리프노드라고 불리기도 합니다.
자바스크립트(JavaScript) DOM
자바스크립트와 DOM은 어떤 관계일까?
자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중 가장 유명한 언어로 자바스크립트와 DOM은 엄밀히 다른개념이며, 꼭 자바스크립트로만 DOM을 다룰 수 있는 것은 아닙니다.
DOM의 객체 구성요소
- 프로퍼티(property) : DOM 객체의 멤버 변수입니다. HTML태그의 속성을 반영합니다.
- 메소드(method) : DOM 객체의 멤버 함수입니다. HTML 태그를 제어합니다
- 컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열입니다. 예를 들어 children컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가집니다.
- 이벤트 리스너(event listner) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가집니다.
- 스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능합니다.
참고 : https://www.codestates.com/blog/content/dom-javascript
문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로
웹 개발을 하는 프론트엔드 개발자라면 알고 있어야하는 자바스크립트(JavaScript)와 DOM(문서 객체 모델)란 무엇일까요?자바스크립트와 DOM(문서 객체 모델)의 관계와 차이점은 무엇인지, 자바스크
www.codestates.com
https://www.youtube.com/watch?v=uK6uExrg7Ww&list=PLZKTXPmaJk8JVQv3XSNF8yJMdsxbFrO3S&index=1
'프론트엔드 > javascript' 카테고리의 다른 글
| 자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제 (0) | 2023.04.14 |
|---|---|
| 자바스크립트 - DOM & EVENT #2 부모,자식,형제 노드 (0) | 2023.04.13 |
| 실용 자바스크립트 (0) | 2023.04.12 |
| 자바스크립트 - async, await (0) | 2023.04.11 |
| 자바스크립트 - 프로미스(Promise) (0) | 2023.04.11 |
