TIL 2021.09.30 - 2주차 ✏️

이민영·2021년 10월 2일

엘리스 AI트랙 Today I Learned ✏️

목록 보기

8/10

📍이번주 학습 목표

JavaScript 기초 문법 공부하기

DOM과 이벤트 동작 방법 이해하기

제이쿼리 사용 방법 공부하기

자료구조의 개념 공부하기

오늘 배운 내용 💪

Javascript 기초 문법 공부하기

<오늘 복습할 내용>
1. 자바스크립트와 DOM
2. Node 객체

DOM이란?
= DOM(= Document Object Model)은 객체 지향 모델로써 구조화 된 문서를 표현하는 방식이다. DOM은 XML이나 HTML문서의 프로그래밍 인터페이스를 나타낸다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

DOM의 종류
1) core DOM : 모든 문서 타입을 위한 DOM모델.
2) HTML DOM : HTML문서를 위한 DOM모델.
3) XML DOM : 문서를 위한 DOM 모델
Document 객체
= Document 객체는 웹 페이지를 의미한다. 웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

노드와 노드 트리
= HTML DOM에서 정보를 저장하는 계층적 단위
= 노드 트리는 노드들이 집합으로, 노드 간의 관계를 나타낸다.
⇒ 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.
노드 간의 관계
= 노드 트리는 모든 노드는 서로 계층적 관계를 맺고 있다.
노드의 종류
1) 문서 노드 (document node)
→ HTML 문서 전체를 나타내는 노드

2) 요소 노드 (element node)
→ 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드

3) 주석 노드 (comment node)
→ HTML 문서의 모든 주석은 주석 노드

4) 속성 노드 (attribute node)
→ 모든 HTML요소의 속성은 속성 노드 이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함 되지 않는다.

5) 텍스트 노드 (text node)
→ HTML 문서의 모든 텍스트는 텍스트 노드
노드의 값
= 노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
nodeName(이름), nodeValue(값), nodeType(타입)

<참고 문서>

프론트엔드 개발자를 꿈꾸고 있습니다 !