Window 객체는 브라우저의 요소, 자바스크립트 엔진, 모든 변수를 담고 있는 객체 입니다.
브라우저 전체를 담당하고 있는 객체라고 생각하시면 됩니다. 즉 자바스크립트 코드의 전역 객체 입니다. 브라우저를 제어하는 메서드를 제공합니다.
Window 객체 안에 Document 객체가 있고 이 객체는 웹사이트를 담당하는 객체 입니다.

---

DOM

DOM (Document Object Model) 은 한국 말로 하면 문서 객체 모델 입니다. 웹페이지를 구성하는 html 문서의 태그들을 자바스크립트가 이용 할 수 있도록 객체로 만든것을 문서 객체 모델이라고 합니다.

DOM 트리

브라우저는 html 문서에서의 객체들을 트리구조로 생성합니다. html 문서에서 텍스트도 객체 입니다. 태그는 요소 노드, 텍스트는 텍스트 노드, DOM 의 시작 노드는 문서 노드, 주석은 주석 노드 입니다.

document 는 무엇인가?

DOM 의 최상위 객체 입니다. 브라우저가 html 문서를 웹사이트에 로드하기 전에 document 객체를 생성 합니다. 그 후 document 객체를 뿌리로 하는 DOM 을 생성 합니다.
document 객체로 페이지내에 무언가를 만들 수 있고 변경할수도 있습니다.

document 객체 접근 법

위에서 말했던것처럼 자바스크립트로 DOM 객체에 접근하여 객체를 조작 할 수 있습니다. 객체를 조작하기 위해서 DOM 객체에 접근하는 방법을 알아 봅시다.
모든 DOM 객체를 조작하기 위해서는 최상단 객체인 document 로 접근해야 합니다.
document 객체의 최상단 노드들인 html, head, body 노드 들에 접근 할때는 document 객체의 프로퍼티를 사용해서 접근 할 수 있습니다.

• document.documentElement : html 태그에 접근 합니다.
• document.body : body 태그에 접근 합니다.
• document.head : head 태그에 접근 합니다.

위의 방법으로 html 문서의 최상단 부모 태그에 접근 할 수 있습니다.

DOM 탐색 프로퍼티

자식 노드를 탐색하는 방법을 알아봅시다. 여기서 자식 노드와, 후손 노드를 정확히 알고 있어야 합니다.
자식 노드 : 태그의 바로 아래에 있는 노드를 자식 노드라고 합니다.
후손 노드 : 태그의 아래에 있는 모든 노드를 후손 노드라고 합니다.

• 태그.children : 해당 요소의 모든 자식 노드 중 요소 노드만을 선택 합니다.
• 태그.childrenNodes : 해당 요소의 모든 자식 노드를 선택 합니다. 요소 노드와 텍스트 노드를 모두 선택 합니다.
• 태그.firstChild : 해당 요소의 자식 노드 중 첫번째 노드만 선택 합니다. 요소 노드, 텍스트 노드 포함
• 태그.firstElementChild : 해당 요소의 자식 노드 중 첫번째 요소 노드만 선택 합니다.
• 태그.lastChild : 해당 요소의 자식 노드 중 마지막 노드만 선택 합니다. 요소 노드, 텍스트 노드 포함
• 태그.lastElementChild : 해당 요소의 자식 노드 중 마지막 요소 노드만 선택 합니다.
• 태그.parentNode : 해당 태그의 부모 노드를 선택 합니다. 요소 노드, 텍스트 노드 포함
• 태그.previousSibling : 해당 태그의 형제 태그 중 위에 노드를 선택 합니다.
• 태그.previousElementSibling : 해당 태그의 형제 태그 중 위에 요소 노드만 선택 합니다.
• 태그.nextSibling : 해당 태그의 형제 태그 중 아래 노드를 선택 합니다.
• 태그.nextElementSibling : 해당 태그의 형제 태그 중 아래 요소 노드만 선택 합니다.

table DOM 탐색

table 노드는 다양한 프로퍼티를 제공하는데 가장 유용한 프로퍼티를 소개 하겠습니다.
테이블을 생성하고 이벤트 리스너를 달아서 td 를 클릭하면 이벤트가 발생하는데 클릭한 칸의 td 의 위치를 알 수 있는 프로퍼티를 소개 하겠습니다.
tr.rowIndex : table 태그 내에서 해당 tr 태그가 몇번째 행인지 숫자로 반환
td.cellIndex : td 태그가 속한 tr 에서 몇번째 칸인지 숫자를 반환

이 두가지 프로퍼티를 이용하면 클릭한 태그의 위치를 쉽게 얻을 수 있습니다.

document 객체에서 이건 알고 가세요.

운전을 할때 자동차의 모든 기능을 몰라도 자동차를 조작하는 방법은 알아야 겠죠?
document 객체에는 아주 많은 속성과 메서드들이 있습니다.
이것을 모두 알아보는 것 보다 자주 사용하고 html 을 조작할때 꼭 알아야 할 메서드를 알아보도록 하겠습니다.

• document.

  • getElementById(아이디 이름)
  • getElementsByClassName(클래스 이름)
  • getElementsByName(이름)
  • getElementsByTagName(태그 이름)

아이디,클래스,이름을 가진 태그를 선택 하는 메서드 입니다. 태그 이름을 넣어 해당 태그를 선택 할 수 있습니다. 해당하는 태그가 하나가 아니라 여러개 일수도 있겠죠? 위의 메서드를 사용하면 해당하는 태그들을 선택해 배열로 반환 합니다. 괄호 안에는 문자열로 넣어줘야 합니다.

• document.querySelector(선택자)

  css 선택자를 선택하는 메서드 입니다. 괄호 안에는 문자열로 넣어줘야 합니다.
  아이디는 #아이디이름, 클래스는 .클래스이름을 넣어주면 됩니다.
  부모태그>자식태그 이런 방법으로도 선택자를 선택 할 수 있습니다.
  보통 위의 태그를 선택하는 메서드보다 선택자를 선택하는 메서드를 더 많이 사용 합니다. 선택자에 해당하는 첫번째 요소를 선택 합니다. id 는 유일한 하나의 요소에만 선택자를 지정하지만 클래스, 태그이름은 한개가 아닐 수 있습니다.
  그럼 선택자에 대응하는 모든 요소를 선택할려고 하면 어떻게 해야 할까요?
  document.querySelectorAll(선택자) 를 사용 해야 합니다.

• document.createElement(태그 이름)

  document 에 새로운 태그를 생성할때 사용하는 메서드 입니다. 메서드를 사용한다고 바로 생성되는 것은 아니고 메모리에 저장되어 있다가 태그를 추가하는 메서드를 사용하여 실제로 태그를 추가 합니다.

• document.createDocumentFragment();

  자바스크립트에서 document 의 태그들을 조작하는것은 성능에 영향을 줍니다. 그렇다고 태그들을 조작하지 않을수는 없기 때문에 너무 자주 document 를 사용 해야 하다면 가짜 document 를 만들어 태그들을 추가하는 메서드로 일단 가짜 document 에 추가할 태그들을 추가하고 그 후에 한번에 document 를 사용하여 body 태그 자식 태그로 추가하면 document 를 한번만 사용해서 태그들을 추가 할 수 있습니다.

이제 위에서 메서드를 사용해 생성한 태그를 추가하거나 삭제할때 사용하는 메서드에 대해서 알아봅시다.

• 태그.appendChild(생성한 태그) : createElement 메서드로 생성한 태그를 해당 태그 자식 태그의 마지막 태그로 추가 합니다.

• 태그.removeChild(삭제할 태그) : 해당 태그의 자식 태그 중 삭제할 태그와 일치하는 마지막 태그를 삭제 합니다.

• 태그.insertBefore(추가할 태그, 기준 태그) : 기준 태그의 형제 태그로 추가할 태그를 추가 합니다. 추가 위치는 기준 태그의 html 문서상 위 입니다.