DOM 기본
DOM은 동적 애플리케이션의 시작입니다.
클래스 소개
난이도
보통
카테고리
프로그래밍 - 프로그래밍 기초
태그
리액트, 앵귤러, 자바스크립트, 타입스크립트, HTML, vue, DOM
추천 학습대상
- 자바스크립트 개발자
- 자바스크립트 이외 언어의 웹 개발자(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 나 혼자만 마스터 루트를 추천합니다.
교육 과정
모두 펼치기
- 010. 강의 소개
- 021. DOM 관련 요소 기술 개념 정리
- 032. DOM 개요
- 043. DOM 기본 개념
- 054. Document 인터페이스
- 065. Element 인터페이스
- 076. Element 인터페이스: NamedNodeMap
- 087. Element 인터페이스: 속성 메소드
- 098. namespace를 사용한 속성 처리
- 109. DOMImplementation 인터페이스
- 1110. Node 인터페이스
- 1211. Node Tree Position 프로퍼티
- 1312. Node Tree 포지션 비교
- 1413. Node 추가, 삭제, 대체, 복제
- 1514. DOM Traversal
- 1615. DocumentFragment 인터페이스
- 1716. 텍스트 처리 인터페이스
- 1817. HTML 스펙의 Document 인터페이스
- 1918. Window 인터페이스 1
- 2019. Window 인터페이스 2
- 2120. Navigator 인터페이스
- 2221. Messaging System
- 2322. WindowOrWorkerGlobalScope 인터페이스
1. 기술 용어, 코드 작성 기준
2. 뉘앙스 단순화 방법: 시맨틱 그룹, DOM 접근 키워드
3. 자바스크립트의 Host Environment: DOM 인터페이스, Host Environmen
4. 자바스크립트의 Object, Property: 함수 실행 단계, 오브젝트, 프로퍼티
5. 함수, 메소드, Global Object
6. 실행 Context, Scope chain: Context 개념, 스코프, 실행 콘텍스트 키워드
7. HTML 정리: 엘리먼트, 태그, HTML, HTML5
8. HTML의 구조, 구성, 아웃라인
9. <section>와 아웃라인: section 엘리먼트, section 아웃라인 참고사항
10. HTML 스펙의 엘리먼트
11. 요구 분석, 시나리오: 시나리오 작성 형태, 이벤트 + 프로세스
12. 실무 기준: 실무 기준, ECMAScript 스펙, 프로그램 개발, 강의 형태
1. 다큐먼트와 인터페이스: DOM의 개념적 핵심, 인터페이스 리스트 활용 방법
2. DOM 스펙 레벨: DOM 출현 배경, DOM 레벨
1. 자바스크립트 대응 용어 정리: HTML과 자바스크립트, CSS와 자바스크립트
2. DOM Document, HTML Document 인터페이스
3. 노드(Node): HTML과 DOM 트리, 노드 타입
4. Node Tree: 노드 위치 표현, 트리(Tree), Tree Order, 노드 트리, 구조/위치
5. DOM 랜더링 차이: 노드 트리 차이, 텍스트 노드 제외, 노드 트리/인터페이스
1. Document 프로퍼티: DocumentType, doctype 형태, document 프로퍼티
2. 엘리먼트 추출-1: getElementById(), getElementsByClassName()
3. HTMLCollection 인터페이스: HTMLCollection, item(), namedItem()
4. NodeList 인터페이스: NodeList, item()
5. childNodes, children 프로퍼티 차이
6. Event 개념: Event 요소
7. 이벤트 설정 형태: 이벤트 리스너와 핸들러
8. live, static
9. 엘리먼트 추출-2: getElementsByTagName(), getElementsByTagNameNS()
10. 엘리먼트 오브젝트 생성: createElement(), createElementNS()
1. XML 형태
2. XML과 Namespace
3. content 속성, IDL 속성
4. 자바스크립트로 속성값을 구하는 형태
5. DOMTokenList 인터페이스-1
6. DOMTokenList 인터페이스-2
7. DOMTokenList 인터페이스-3
1. NamedNodeMap 인터페이스-1
2. NamedNodeMap 인터페이스-2
3. NamedNodeMap 인터페이스-3
1. 속성 작성 여부: hasAttribute(), hasAttributes()
2. 속성 작성 체크: hasAttribute(), hasAttributes()
3. 속성값 추출: getAttribute()
4. 속성 추출: 이름, 노드, getAttributeNames(), getAttributeNode()
5. 속성 생성: Attr 오브젝트, createAttribute()
6. 속성 생성: namespace 사용, createAttributeNS()
7. Attr 인터페이스
8. 속성 설정-1: setAttribute()
9. 속성 설정-2: setAttribute(), setAttributeNode()
10. 속성 삭제: removeAttribute(), removeAttributeNode()
11. 속성 토글: toggleAttribute(), toggle 활용 맛보기
1. 속성 존재 여부, 속성값 추출: hasAttributeNS(), getAttributeNS()
2. 속성 설정, 속성 삭제: setAttributeNS(), removeAttributeNS()
1. DOMImplementation 인터페이스-1: implementation, createHTMLDocument()
2. DOMImplementation 인터페이스-2: createDocument(), createDocumentType()
1. textContent
2. innerText
3. outerText
4. innerHTML, outerHTML
5. Node Tree Position: Node와 Node Tree, Node Tree 포지션 명칭
6. insertAdjacentHTML()
7. createTextNode(), normalize()
1. 첫 번째 위치 프로퍼티: firstChild, firstElementChild
2. 마지막 위치 프로퍼티: lastChild, lastElementChild
3. 부모 위치 프로퍼티: parentNode, parentElement
4. 다음 형제 위치 프로퍼티: nextSibling, nextElementSibling
5. 앞 형제 위치 프로퍼티: previousSibling, previousElementSibling, doctype
1. compareDocumentPosition()
2. contains(), hasChildNodes()
1. appendChild()
2. append(), childElementCount
3. insertBefore(), prepend()
4. before(), after()
5. replaceChild(), replaceChildren(), replaceWith()
6. remove(), removeChild(), isConnected
7. cloneNode(), isEqualNode()
8. importNode(), adoptNode(), ownerDocument
9. baseURI, lookupNamespaceURI(), isDefaultNamespace(), lookupPrefix()
1. NodeIterator 오브젝트 생성: createNodeIterator(), nextNode()
2. NodeIterator 오브젝트 생성: 노드 타입 값, createNodeIterator(), previousNode()
3. NodeIterator 오브젝트 프로퍼티: root, whatToShow, referenceNode
4. NodeFilter 인터페이스: createNodeIterator(), acceptNode(), filter 프로퍼티
5. TreeWalker 인터페이스: createTreeWalker()
6. firstChild(), lastChild()
7. parentNode(), nextNode(), nextSibling(), previousNode(), previousSibling()
1. createDocumentFragment(), DocumentFragment 관련 인터페이스
1. CharacterData 인터페이스-1: appendData(), substringData()
2. CharacterData 인터페이스-2: insertData(), replaceData(), deleteData()
3. Text 인터페이스: new Text(), splitText()
1. Resource metadata management
2. DOM Tree 악세서-1
3. DOM Tree 악세서-2: getElementsByName()
4. Location 인터페이스: location 프로퍼티
5. DOMStringList 인터페이스: ancestorOrigins, item(), contains()
6. Location 인터페이스: assign(), replace(), reload()
7. dynamic markup insertion: open(), write(), close()
8. user interaction: defaultView, designMode, hasFocus(), activeElement
1. current browsing context
2. BarProp 인터페이스
3. History 인터페이스: back(), forward(), go()
4. History 인터페이스: pushState()
5. History 인터페이스: replaceState()
6. History 인터페이스: scrollRestoration
1. other browsing context: WindowProxy, length, frames
2. open()
3. current browsing context: close(), stop(), focus(), blur()
4. other browsing context: parent, top, frameElement, opener
5. user prompts: alert(), confirm(), prompt(), print()
1. NavigatorID 인터페이스: userAgent
2. NavigatorLanguage, NavigatorOnLine, NavigatorCookies 인터페이스
3. NavigatorConcurrentHardware, NavigatorContentUtils, originAgentCluster
1. messaging system, postMessage()
2. postMessage(): 파라미터 3개 형태
3. postMessage()의 transfer
1. structured cloning: origin, isSecureContext, structuredClone()
2. Timers: setTimeout(), clearTimeout(), setInterval(), clearInterval()
3. microtask queuing: Call Stack, Event Loop, Task, Task Queue
4. microtask queuing: queueMicrotask()
5. Base64 utility methods
6. ImageBitmap: createImageBitmap()
7. ImageBitmap 인터페이스
마지막 업데이트|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
난이도
보통
수강기간
평생 무제한