window 객체
- 브라우저 창을 대변하며 JS 최상단에 존재하는 객체
- JS 코드 어느 곳에서나 항상 접근이 가능하다. => 그래서 Global Object 라고 부른다.
- 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 일반적으로
window.은 생략한다.
DOM
Document Object Model의 약자로, 한국어로는 문서 객체 모델이다.
웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것.
이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.
DOM Tree
HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부른다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현된다.
DOM 트리를 구성할 때..
브라우저가 HTML 코드를 해석할 때 각 코드들은 상황에 맞게 node를 생성하고 DOM 트리를 구성하는데,
HTML 태그는 요소 노드가 되고,
문자들은 텍스트 노드, 그리고
주석도 주석 노드로
DOM 트리에 반영된다.
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
I Love JavaScript
<!-- I Love Codeit -->
</body>
</html>예를 들어 이런 코드는 아래와 같이 DOM 트리를 구성하게 된다.
🔴 주의할 점!
텍스트 노드 중에서 붉은 테두리가 있는 부분을 통해 알 수 있듯 태그와 태그사이에 줄 바꿈과 들여쓰기로 인한 띄어쓰기도 텍스트 노드(Text라고 표시된 부분)로 생성된다!!
조금만 더 코드가 복잡하거나 혹은 코드의 스타일이 일정하지 않은 경우에는 이런 줄 바꿈과 들여쓰기로 인해 생성된 텍스트 노드의 존재를 파악하기가 쉽지 않을 수 있다.
그래서 모든 노드가 공통으로 갖고 있는 프로퍼티를 활용한다면, 예상치 못한 텍스트 노드를 선택하게 되어 의도하지 않은 결과를 만들어 낼 가능성이 커지게 된다.
