이 시리즈의 게시글은 모던 JavaScript 의 내용과 HTTP, 네트워크 관련 내용을 담고 있습니다.
자바스크립트가 돌아가는 플랫폼을 호스트라고 부르는데,
호스트 환경이 웹 브라우저라면 다음과 같은 기능을 사용할 수 있습니다.
최상단에 window 라는 루트 객체를 두는데, 이는 두 가지 역할을 합니다.
- 자바스크립트 코드 전체의 전역 객체
- 브라우저 창을 대변하며 제어 메서드 제공
1번에 의해 전역 함수는 전역 객체 window 의 메서드가 되며,
2번에 의해 window 객체로 브라우저 창의 정보를 제공받고, 제어할 수 있습니다.
🥦 문서 객체 모델 DOM
DOM 은 웹 페이지 내의 모든 콘텐츠를 수정 가능한 객체로 나타낸 것으로,
document 객체를 사용하여 각 콘텐츠에 접근합니다.
// 배경을 붉은색으로 변경하기
document.body.style.background = "red";DOM 에 의하면 모든 HTML 태그가 document 에 속한 객체가 됩니다.
즉 document 를 통해 HTML 의 모든 태그, 태그 속의 text 를 자바스크립트에서 접근 가능합니다.
DOM 트리 구조
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>위와 같은 문서가 있을 때, DOM 은 다음과 같은 태그 트리 구조로 구성됩니다.
태그는 요소 노드(요소)이며, 다른 요소 노드와 텍스트 노드(요소 내의 문자) 를 포함합니다.
html 은 최상위에 위치한 루트 노드이고, header 와 body 는 루트 노드의 자식 노드이죠.
이렇듯 노드와 그 자식, 그 자식들의 자식으로 트리가 구성됩니다.
(자식 노드는 바로 아래의 자식 요소를 의미합니다. 자식의 자식까지 하위 요소 전부는 후손 노드라고 합니다.)
HTML 안의 모든 것은 DOM 트리에 추가되어야 한다는 규칙에 의해, 공백, 줄바꿈 또한 텍스트 노드로, 주석 또한 주석 노드로 DOM 에 추가됩니다.
문서 전체를 나타내는 document 객체 또한 DOM 노드이죠.
실무에서는 주로 다음과 같은 노드를 다룹니다.
- DOM 의 진입점인
document노드 - HTML 태그인 요소 노드
- 텍스트를 포함하는 텍스트 노드
- 화면에 보이지 않는 주석 노드
Live DOM Viewer 에서 실시간으로 DOM 구조를 볼 수 있습니다.
DOM 탐색하기
DOM을 이용하여 요소와 요소의 콘텐츠에 수행하는 모든 연산은 document 에서 시작합니다.
DOM 노드 탐색 관계는 다음과 같습니다.
DOM 트리 상단의 노드들은 document 의 프로퍼티로 접근할 수 있습니다.
- html: document.documentElement
- body: document.body
- head: document.head
이 외 childNodes... 등등으로 노드의 모든 자식 가져오기 등이 가능하지만
저는 querySelector 를 사용하는 게 가장 편했습니다.
querySelector 로 요소 검색하기
querySelector 를 사용하면 CSS 선택자와 같은 방식으로 요소를 선택할 수 있습니다.
CSS 선택자의 가상 클래스(:hover, :active) 도 사용 가능하므로 아주 유용합니다.
element.querySelector(selectors);- 반환 대상: element
querySelectorAll 을 사용하면 선택자에 해당하는 모든 요소를 배열 형태로 가져옵니다.
querySelector 는 조건에 맞는 맨 처음 하나만 가져오므로, querySelecotrAll 의 0번 인덱스 결과와 동일합니다.
getElementsBy 로 요소 검색하기
getElementsBy* 로 요소들을 얻어올 수도 있는데, getElementBy 는 요소 하나를, s 를 붙이면 요소들이 전부 모인 컬렉션을 반환합니다.
getElementSByTagName 으로 찾으면 인수에 해당하는 태그 이름의 요소 컬렉션을 반환하고,
getElementsByClassName 으로 찾으면 클래스명에 맞는 요소 컬렉션을 반환합니다.
📌 querySelectorAll 과 getElementsBy 의 차이
두 메서드는 모두 여러 요소를 한 번에 얻어온다는 점에서 비슷합니다.
하지만 몇 가지 차이가 존재합니다.
- 반환 타입
모두 요소의 집합, 컬렉션을 반환하지만 타입이 다릅니다.
querySelectorAll: NodeList 반환getElemtsBy: HTMLCollection 반환
위 문서를 읽으면 둘의 차이를 알 수 있습니다.
일단 구현한 메서드부터 차이가 나죠.
NodeList 는 좀 더 다양한 메서드가 구현되어 있습니다.
- 문서 변경 사항 반영
getElementsBy* 로 얻어온 컬렉션은 문서의 변경 사항을 반영합니다.
<div>첫 번째 div</div>
<script>
let divs = document.getElementsByTagName('div');
alert(divs.length); // 1
</script>
<div>두 번째 div</div>
<script>
alert(divs.length); // 2
</script>반면 querySelectorAll 로 얻어오는 컬렉션은 정적입니다.
한 번 확정된 후에 변경사항이 반영되지 않습니다.
matches, closest, contains
그 외 유용하게 사용되는 메서드는 다음과 같습니다.
element.matches(css): element 가 해당 CSS 선택자와 일치하면 true, 아니면 falseelement.closest(css): 해당 CSS 선택자와 일치하는 가장 가까운 조상 요소를 탐색(자기 자신 포함)elemA.contains(elemB): elemB가 elemA의 후손이거나 elemA==elemB일 때, true
브라우저 객체 모델 BOM
BOM 은 document 이외의 것을 제어하기 위해 브라우저가 제공하는 추가 객체입니다.
navigator 처럼 운영체제, 브라우저 정보를 가르쳐주거나 location 처럼 현재 URL 을 읽고 쓸 수 있도록 합니다.
alert/confirm/prompt 도 BOM 의 일부인 브라우저 메서드로,
문서에 존재하는 콘텐츠는 아니지만 브라우저와 사용자 간 상호작용을 도와줍니다.
