패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

DOM 기본

DOM은 동적 애플리케이션의 시작입니다.

강좌 소개
난이도
보통
카테고리
프로그래밍 - 프로그래밍 기초
태그
리액트, 앵귤러, 자바스크립트, 타입스크립트, HTML, vue, DOM
수료증
발급 가능
추천 수강대상
- 자바스크립트 개발자
- 자바스크립트 이외 언어의 웹 개발자(DOM은 모든 언어의 공통)


DOM 이란?


DOM(Document Object Model)은 동적 웹 애플리케이션의 바탕이며 기본입니다.
마우스 클릭도 DOM이며, 입력한 값을 구하는것도 DOM입니다.
데이터를 웹 페이지에 동적으로 표현하는 것도 DOM입니다.

DOM을 모르고 웹 프로그램을 말할 수 없습니다.

DOM 스펙의 95% 이상을 다루어 마침표를 찍을 수 있습니다.
넓고(Wide), 깊게(Deep), 자세하게(Detail) 내용을 다루면서도 중복으로 인한 시간과 비용을 허비하지 않습니다.


해당 강좌로 배울 수 있는 것

DOM은 기능도 중요하지만, 감각을 만드는 것이 더 중요합니다.

감각을 만들기 위해서는 코딩도 중요하지만 넓이와 깊이를 느껴야 합니다.
다양한 코드 형태를 다루며, 감각이 만들어 지도록 넓고 깊으면서 자세하게 설명합니다.

자바스크립트와 DOM을 활용한 코드도 같이 다룹니다. 자바스크립트 실력도 향상시킬 수 있습니다.

웹의 기반 기술은 HTML, CSS, DOM, JavaScript입니다.
트렌드 기술은 시간이 지나면 바뀌거나 없어지기도 하지만, 기반 기술은 없어지지 않으며 기술이 축적됩니다.
처음부터 깊고 넓으면서 자세하게 배울 필요가 있습니다.

개설된 4개의 자바스크립트 끝내기 강좌와 함께 웹 개발의 바탕이 되는 기반 기술을 완전하게 마침표를 찍을 수 있습니다.


본 강좌는 DOM 끝내기 강좌의 첫번째 강좌입니다.

두번째 강좌는 DOM 인터렉션으로 Event, Web Component 등을 다룹니다.
세번째 강좌는 CSSOM으로 CSS 중심으로 DOM 처리를 다룹니다.

DOM의 프로퍼티와 메소드는 모든 언어에서 사용하며 기능도 같습니다. 다만, 구현하는 형태가 다릅니다.
자바스크립트 언어로 강좌를 진행하지만, DOM 개념 / 기능 파악이 목적이라면 다른 언어의 개발자도 수강할 수 있습니다.

강좌를 통해 DOM의 숲, 나무, 가지, 꽃을 보았다는 개발자에게 가장 중요한 자신감을 갖게 됩니다.
웹 애플리케이션의 구상, 생각, 접근이 달라집니다.


선수 지식

자바스크립트 기본, HTML

필수는 아니나 JS 기초 내용을 학습하고 들으시면 강좌 내용 이해하는데 도움될 수 있습니다.
같은 강의자님의 선수과정인 JS 나 혼자만 마스터 루트를 추천합니다.

체험하기
모두 펼치기
  • 01
    0. 강의 소개
    3개 (29분)
    • 1. Hello DOM
    체험하기
    9분
    2. 콘텐츠 표현 플로우, 강좌 범위
    체험하기
    11분
    3. 강의자 경험 소개, 사전 지식, 제공 자료
    체험하기
    8분
  • 02
    1. DOM 관련 요소 기술 개념 정리
    12개 (3시간 3분)
    • 1. 기술 용어, 코드 작성 기준
    체험하기
    14분
    2. 뉘앙스 단순화 방법: 시맨틱 그룹, DOM 접근 키워드
    체험하기
    15분
교육 과정
모두 펼치기
  • 01
    0. 강의 소개
    3개 (29분)
    • 1. Hello DOM
    체험하기
    9분
    2. 콘텐츠 표현 플로우, 강좌 범위
    체험하기
    11분
    3. 강의자 경험 소개, 사전 지식, 제공 자료
    체험하기
    8분
  • 02
    1. DOM 관련 요소 기술 개념 정리
    12개 (3시간 3분)
    • 1. 기술 용어, 코드 작성 기준
    체험하기
    14분
    2. 뉘앙스 단순화 방법: 시맨틱 그룹, DOM 접근 키워드
    체험하기
    15분
    3. 자바스크립트의 Host Environment: DOM 인터페이스, Host Environmen
    12분
    4. 자바스크립트의 Object, Property: 함수 실행 단계, 오브젝트, 프로퍼티
    18분
    5. 함수, 메소드, Global Object
    18분
    6. 실행 Context, Scope chain: Context 개념, 스코프, 실행 콘텍스트 키워드
    14분
    7. HTML 정리: 엘리먼트, 태그, HTML, HTML5
    15분
    8. HTML의 구조, 구성, 아웃라인
    15분
    9. <section>와 아웃라인: section 엘리먼트, section 아웃라인 참고사항
    15분
    10. HTML 스펙의 엘리먼트
    13분
    11. 요구 분석, 시나리오: 시나리오 작성 형태, 이벤트 + 프로세스
    19분
    12. 실무 기준: 실무 기준, ECMAScript 스펙, 프로그램 개발, 강의 형태
    10분
  • 03
    2. DOM 개요
    2개 (19분)
    • 1. 다큐먼트와 인터페이스: DOM의 개념적 핵심, 인터페이스 리스트 활용 방법
    10분
    2. DOM 스펙 레벨: DOM 출현 배경, DOM 레벨
    9분
  • 04
    3. DOM 기본 개념
    5개 (59분)
    • 1. 자바스크립트 대응 용어 정리: HTML과 자바스크립트, CSS와 자바스크립트
    12분
    2. DOM Document, HTML Document 인터페이스
    6분
    3. 노드(Node): HTML과 DOM 트리, 노드 타입
    16분
    4. Node Tree: 노드 위치 표현, 트리(Tree), Tree Order, 노드 트리, 구조/위치
    12분
    5. DOM 랜더링 차이: 노드 트리 차이, 텍스트 노드 제외, 노드 트리/인터페이스
    9분
  • 05
    4. Document 인터페이스
    10개 (2시간 16분)
    • 1. Document 프로퍼티: DocumentType, doctype 형태, document 프로퍼티
    13분
    2. 엘리먼트 추출-1: getElementById(), getElementsByClassName()
    17분
    3. HTMLCollection 인터페이스: HTMLCollection, item(), namedItem()
    13분
    4. NodeList 인터페이스: NodeList, item()
    13분
    5. childNodes, children 프로퍼티 차이
    8분
    6. Event 개념: Event 요소
    15분
    7. 이벤트 설정 형태: 이벤트 리스너와 핸들러
    14분
    8. live, static
    13분
    9. 엘리먼트 추출-2: getElementsByTagName(), getElementsByTagNameNS()
    13분
    10. 엘리먼트 오브젝트 생성: createElement(), createElementNS()
    12분
  • 06
    5. Element 인터페이스
    7개 (1시간 30분)
    • 1. XML 형태
    9분
    2. XML과 Namespace
    12분
    3. content 속성, IDL 속성
    11분
    4. 자바스크립트로 속성값을 구하는 형태
    17분
    5. DOMTokenList 인터페이스-1
    11분
    6. DOMTokenList 인터페이스-2
    10분
    7. DOMTokenList 인터페이스-3
    17분
  • 07
    6. Element 인터페이스: NamedNodeMap
    3개 (39분)
    • 1. NamedNodeMap 인터페이스-1
    8분
    2. NamedNodeMap 인터페이스-2
    13분
    3. NamedNodeMap 인터페이스-3
    17분
  • 08
    7. Element 인터페이스: 속성 메소드
    11개 (2시간 21분)
    • 1. 속성 작성 여부: hasAttribute(), hasAttributes()
    16분
    2. 속성 작성 체크: hasAttribute(), hasAttributes()
    7분
    3. 속성값 추출: getAttribute()
    11분
    4. 속성 추출: 이름, 노드, getAttributeNames(), getAttributeNode()
    9분
    5. 속성 생성: Attr 오브젝트, createAttribute()
    13분
    6. 속성 생성: namespace 사용, createAttributeNS()
    13분
    7. Attr 인터페이스
    10분
    8. 속성 설정-1: setAttribute()
    8분
    9. 속성 설정-2: setAttribute(), setAttributeNode()
    15분
    10. 속성 삭제: removeAttribute(), removeAttributeNode()
    16분
    11. 속성 토글: toggleAttribute(), toggle 활용 맛보기
    17분
  • 09
    8. namespace를 사용한 속성 처리
    2개 (34분)
    • 1. 속성 존재 여부, 속성값 추출: hasAttributeNS(), getAttributeNS()
    17분
    2. 속성 설정, 속성 삭제: setAttributeNS(), removeAttributeNS()
    17분
  • 10
    9. DOMImplementation 인터페이스
    2개 (26분)
    • 1. DOMImplementation 인터페이스-1: implementation, createHTMLDocument()
    13분
    2. DOMImplementation 인터페이스-2: createDocument(), createDocumentType()
    13분
  • 11
    10. Node 인터페이스
    7개 (1시간 19분)
    • 1. textContent
    12분
    2. innerText
    9분
    3. outerText
    8분
    4. innerHTML, outerHTML
    14분
    5. Node Tree Position: Node와 Node Tree, Node Tree 포지션 명칭
    8분
    6. insertAdjacentHTML()
    9분
    7. createTextNode(), normalize()
    15분
  • 12
    11. Node Tree Position 프로퍼티
    5개 (47분)
    • 1. 첫 번째 위치 프로퍼티: firstChild, firstElementChild
    13분
    2. 마지막 위치 프로퍼티: lastChild, lastElementChild
    6분
    3. 부모 위치 프로퍼티: parentNode, parentElement
    12분
    4. 다음 형제 위치 프로퍼티: nextSibling, nextElementSibling
    6분
    5. 앞 형제 위치 프로퍼티: previousSibling, previousElementSibling, doctype
    9분
  • 13
    12. Node Tree 포지션 비교
    2개 (18분)
    • 1. compareDocumentPosition()
    11분
    2. contains(), hasChildNodes()
    6분
  • 14
    13. Node 추가, 삭제, 대체, 복제
    9개 (1시간 37분)
    • 1. appendChild()
    11분
    2. append(), childElementCount
    10분
    3. insertBefore(), prepend()
    10분
    4. before(), after()
    8분
    5. replaceChild(), replaceChildren(), replaceWith()
    9분
    6. remove(), removeChild(), isConnected
    9분
    7. cloneNode(), isEqualNode()
    13분
    8. importNode(), adoptNode(), ownerDocument
    14분
    9. baseURI, lookupNamespaceURI(), isDefaultNamespace(), lookupPrefix()
    10분
  • 15
    14. DOM Traversal
    7개 (1시간 15분)
    • 1. NodeIterator 오브젝트 생성: createNodeIterator(), nextNode()
    8분
    2. NodeIterator 오브젝트 생성: 노드 타입 값, createNodeIterator(), previousNode()
    8분
    3. NodeIterator 오브젝트 프로퍼티: root, whatToShow, referenceNode
    11분
    4. NodeFilter 인터페이스: createNodeIterator(), acceptNode(), filter 프로퍼티
    12분
    5. TreeWalker 인터페이스: createTreeWalker()
    13분
    6. firstChild(), lastChild()
    8분
    7. parentNode(), nextNode(), nextSibling(), previousNode(), previousSibling()
    11분
  • 16
    15. DocumentFragment 인터페이스
    1개 (12분)
    • 1. createDocumentFragment(), DocumentFragment 관련 인터페이스
    12분
  • 17
    16. 텍스트 처리 인터페이스
    3개 (32분)
    • 1. CharacterData 인터페이스-1: appendData(), substringData()
    10분
    2. CharacterData 인터페이스-2: insertData(), replaceData(), deleteData()
    5분
    3. Text 인터페이스: new Text(), splitText()
    16분
  • 18
    17. HTML 스펙의 Document 인터페이스
    8개 (1시간 25분)
    • 1. Resource metadata management
    9분
    2. DOM Tree 악세서-1
    10분
    3. DOM Tree 악세서-2: getElementsByName()
    11분
    4. Location 인터페이스: location 프로퍼티
    10분
    5. DOMStringList 인터페이스: ancestorOrigins, item(), contains()
    10분
    6. Location 인터페이스: assign(), replace(), reload()
    7분
    7. dynamic markup insertion: open(), write(), close()
    10분
    8. user interaction: defaultView, designMode, hasFocus(), activeElement
    14분
  • 19
    18. Window 인터페이스 1
    6개 (57분)
    • 1. current browsing context
    8분
    2. BarProp 인터페이스
    7분
    3. History 인터페이스: back(), forward(), go()
    10분
    4. History 인터페이스: pushState()
    9분
    5. History 인터페이스: replaceState()
    10분
    6. History 인터페이스: scrollRestoration
    11분
  • 20
    19. Window 인터페이스 2
    5개 (59분)
    • 1. other browsing context: WindowProxy, length, frames
    14분
    2. open()
    14분
    3. current browsing context: close(), stop(), focus(), blur()
    15분
    4. other browsing context: parent, top, frameElement, opener
    9분
    5. user prompts: alert(), confirm(), prompt(), print()
    6분
  • 21
    20. Navigator 인터페이스
    3개 (25분)
    • 1. NavigatorID 인터페이스: userAgent
    7분
    2. NavigatorLanguage, NavigatorOnLine, NavigatorCookies 인터페이스
    4분
    3. NavigatorConcurrentHardware, NavigatorContentUtils, originAgentCluster
    13분
  • 22
    21. Messaging System
    3개 (35분)
    • 1. messaging system, postMessage()
    9분
    2. postMessage(): 파라미터 3개 형태
    10분
    3. postMessage()의 transfer
    15분
  • 23
    22. WindowOrWorkerGlobalScope 인터페이스
    7개 (1시간 22분)
    • 1. structured cloning: origin, isSecureContext, structuredClone()
    10분
    2. Timers: setTimeout(), clearTimeout(), setInterval(), clearInterval()
    16분
    3. microtask queuing: Call Stack, Event Loop, Task, Task Queue
    14분
    4. microtask queuing: queueMicrotask()
    6분
    5. Base64 utility methods
    12분
    6. ImageBitmap: createImageBitmap()
    12분
    7. ImageBitmap 인터페이스
    9분
마지막 업데이트|2023년 01월 02일
강의자 소개
김영보캡틴
40년 넘게 소프트웨어를 개발했으며 지금도 개발하고 있습니다. 그 중에서 20년 넘게 JavaScript 중심으로 개발했습니다. 저서: 몰입! 자바스크립트, ECMAScript 6, 자바스크립트 정규표현식 HTML5, DOM 스크립팅, Ajax 활용, prototype.js 완전분석 요구분석을 위한 Event Process 모델링 머신러닝 TensorFlow.js JavaScript 9권 중에서 8권이 국내 저자 최초입니다. 특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
강좌 후기
￦
77,000
평균평점
0.0
난이도
보통
수강기간
평생 무제한