브라우저와 자바스크립트
Window 객체
브라우저 창을 대표하는 window 객체는 자바스크립 상에서 가장 상위에 위치한 객체이다. 이 객체는 자바스크립트 코드 전체에서 언제든지 접근할 수 있어 전역 객체, 또는 Global Object라고 불린다. 어떤 속성이나 메소드를 활용하더라도 결국 그것은 전역 객체인 window 객체 내부의 것이므로, 사용시 window. 을 생략하는 것이 가능하다.
DOM
DOM은 Document Object Model의 줄임말로, 한국어로 번역하면 ‘문서 객체 모델’이라는 의미이다. 이를 좀 더 단순화 하자면, 웹 페이지에 표시되는 HTML 문서 전체를 객체화하여 나타낸 것이라고 이해하면 된다. 이러한 각각의 객체들은 노드(Node)라는 표현을 사용하여 설명되며, 태크는 요소노드, 문자는 텍스트노드로 구분된다.
DOM 트리
HTML의 계층 구조는 DOM에서도 나타는데, 이러한 계층 구조를 DOM 트리라고 부른다. 
DOM 이동 시 활용 가능한 프로퍼티
- element.children - element 의 자식 요소 모음
- element.firstElementChild - element의 첫 번째 자식 요소
- element.lastElementChild - element의 마지막 자식 요소
- element.parentElement - element의 부모 요소
- element.previousElementSibling - element의 이전 혹은 좌축에 있는 요소
- element.nextElementSibling - element의 다음 혹은 우측에 있는 요소
- node.childNodes - node의 자식 노드 모음
- node.firstChild - node의 첫 번째 자식 노드
- node.lastChild - node의 마지막 자식 노드
- node.parentNode - node의 부모 요소
- node.previousSibling - node의 이전 혹은 좌측에 있는 노드
- node.nextSibling - node의 다음 혹은 우측에 있는 노드
주요 요소 노드 프로퍼티
- element.innerHTML - 요소 노드 내부의 HTML코드 문자열로 리턴
- element.outerHTML - 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴
- element.textContent - 요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴
요소 노드 다루기
- 요소 노드 만들기: document.createElement(‘태그이름’)
- 요소 노드 꾸미기: element.textContent, element.innerHTML, …
- 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after, element.before
- 요소 노드 삭제하기: element.remove()
HTML 속성 다루기
- 속성에 접근하기: element.getAttribute(‘속성’)
- 속성 추가(수정)하기: element.setAttribute(‘속성’, ‘값’)
- 속성 제거하기: element.removeAttribute(‘속성’)
스타일 다루기
- style 프로퍼티 활용하기: element.style.styleName = ‘value’;
- class 변경을 통해 간접적으로 스타일 적용하기: element.className, element.classList
classList의 유용한 메소드
- classList.add - 클래스 추가하기 (여러 개의 값을 전달하면 여러 클래스 추가 가능)
- classList.remove - 클래스 삭제하기 (여러 개의 값을 전달하면 여러 클래스 삭제 가능)
- classList.toggle - 클래스 없으면 추가, 있으면 삭제하기 (하나의 값만 적용 가능하고, 두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음)