프론트엔드/javascript

자바스크립트 - DOM & EVENT 노드에 접근하기

2023. 4. 12. 21:54
목차
  1. DOM(Document Object Model)
  2. document node(문서노드)
  3. element node(요소노드)
  4. attribute node(속성노드)
  5. text node(텍스트노드)
  6. 자바스크립트(JavaScript) DOM
  7. DOM의 객체 구성요소

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
  1. DOM(Document Object Model)
  2. document node(문서노드)
  3. element node(요소노드)
  4. attribute node(속성노드)
  5. text node(텍스트노드)
  6. 자바스크립트(JavaScript) DOM
  7. DOM의 객체 구성요소
'프론트엔드/javascript' 카테고리의 다른 글
  • 자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제
  • 자바스크립트 - DOM & EVENT #2 부모,자식,형제 노드
  • 실용 자바스크립트
  • 자바스크립트 - async, await
최맹수
최맹수
맹수개발최맹수 님의 블로그입니다.
최맹수
맹수개발
최맹수
전체
오늘
어제
  • 분류 (236)
    • 로우코드(Lowcode) (53)
      • outsystems (35)
      • OutSystems프로젝트 (18)
      • Mendix (0)
    • 프론트엔드 (0)
      • html (0)
      • css (3)
      • javascript (68)
      • react (47)
      • typescript (7)
    • 정보처리기사 (20)
      • 실기 (16)
    • 공부 (9)
    • Git (5)
    • 백엔드 (21)
      • node.js(express) (20)
    • 자바 (1)
      • java (1)
      • Spring (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascript
  • await
  • 자바스크립트
  • typescript
  • kiosk
  • aggreagtes
  • 정보처리기사실기
  • lowcode
  • 프로젝트
  • 함수
  • outsystems
  • 프론트엔드
  • javscript
  • react
  • dom
  • 로우코드
  • 배열
  • 정보처리기사
  • 아웃시스템즈
  • Promise

최근 댓글

최근 글

hELLO · Designed By 정상우.
최맹수
자바스크립트 - DOM & EVENT 노드에 접근하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.