HTML을 이용한 화면에 UI 표현하기
브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있습니다. 이 HTML은 요소(Element)들로 구성되어 있습니다.
돔 이란? (Document Object Model)
돔(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해 준다. 또한 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
돔 조작
DOM 트리를 DOM에서 제공해 주는 API를 이용해서 조작할 수 있습니다. 이 API를 이용해서 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있습니다.
Document Object
window 객체가 브라우저 창이라고 하면
document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있습니다.
Document 객체 메서드 이용
document 객체의 메서드들을 사용하면 다양한 방법으로 웹페이지 내의 태그들에 접근할 수 있다.
1. 파라미터로 전달한 ID를 가진 태그를 반환 - document.getElementById(요소아이디)
2. 파라미터로 전달한 name 속성을 가진 태그를 반환 - document.getElementByName(name속성값)
3. 파리미터로 전달한 선택자에 맞는 첫 번째 태그를 반환 - document.querySelector(선택자)
DOM 컬렉션
childNodes는 마치 배열 같아 보입니다. 하지만 childeNodes는 배열이 아닌 반복 가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션(collection)입니다.
childeNodes가 컬렉션이기에 가지는 특징
1. for..of를 사용 가능(for..in은 사용 불가) 비록 배열은 아니지만 forEach(), for..of도 사용 가능
(for..of -> 배열을 순환할 때 사용, for..in -> 객체를 순환할 때 사용)
2. 배열이 아니기에 배열 메서드 사용 불가능
3. 배열 메서드를 사용하고 싶다면 Array.from을 사용하면 진짜 배열을 만들 수 있습니다.