DOM
HTML 파일이 로드되고 페이지가 그대로 있지만, 입력할 때 결과를 제안하는 검색 상자, 클릭할 때 열리는 메뉴, 증가하는 카운터 같은 것들은 HTML 파일에 없습니다. 페이지가 로드된 후에 페이지에 무언가가 변경되는데, 그것은 JavaScript가 DOM을 통해 페이지에 닿는 것입니다. 이 장은 그 접근에 관한 것입니다: JavaScript가 페이지의 일부를 찾아 변경하여 페이지가 독자 앞에서 업데이트되는 방법입니다.
DOM이란 무엇인가
브라우저가 페이지를 로드할 때, HTML을 읽고 그것으로부터 **객체의 트리**를 구축합니다: 페이지를 위한 하나의 객체, <body>를 위한 하나, 내부의 각 제목, 단락, 버튼을 위한 하나씩. 그 트리가 DOM입니다. DOM은 Document Object Model의 약자입니다. JavaScript는 이 트리를 읽고 변경할 수 있으며, 그렇게 하면 보는 페이지가 바로 업데이트됩니다.
중요한 점: DOM은 HTML 파일이 아닙니다. 페이지의 라이브 버전으로 브라우저 메모리에 있습니다. .html 파일은 시작 레시피이고, DOM은 브라우저가 제공하는 완성된 요리이며, JavaScript는 모두가 여전히 먹고 있는 동안 접시를 재정렬할 수 있습니다.
DOM의 모든 요소는 객체이며, 객체에서 만난 것과 같은 종류의 객체로, 읽고 변경할 수 있는 속성을 가지고 있습니다. 그것이 모든 트릭입니다: 페이지가 객체이고, 당신은 이미 객체 작업 방법을 알고 있으므로, 페이지를 변경하는 것은 객체 속성을 변경하는 것입니다.
요소 선택하기
요소를 변경하기 전에 트리에서 찾아야 합니다. CSS가 하는 것과 같은 방식으로 선택자를 사용하여 지정하면, 브라우저가 일치하는 객체를 반환합니다.
핵심은 document.querySelector입니다. **CSS 선택자**를 제공하면, CSS에서 사용하는 것과 같은 종류의 패턴이며, 일치하는 첫 번째 요소를 반환합니다:
const card = document.querySelector(".card"); // class="card"인 첫 번째 요소
const total = document.querySelector("#total"); // id="total"인 요소.card는 클래스로 일치하고, #total은 id로 일치하며, "button"과 같은 평문은 태그 이름으로 일치합니다. querySelector는 첫 번째 일치를 제공하고 거기서 멈춥니다. 모든 일치를 원할 때는 querySelectorAll을 사용하면, 루핑할 수 있는 리스트를 반환합니다:
const cards = document.querySelectorAll(".card"); // class="card"인 모든 요소
console.log(cards.length); // 찾은 개수아무것도 일치하지 않으면 querySelector는 null을 반환합니다. 이것은 JavaScript의 "여기에는 아무것도 없다"라는 의미입니다.
document.querySelector에 .card 또는 #total 같은 CSS 선택자를 제공하면, 첫 번째 일치를 제공합니다. 모든 일치를 원할 때는 querySelectorAll을 사용하세요. 아무것도 일치하지 않으면 null을 얻습니다. 이것은 "여기에는 아무것도 없다"를 의미합니다. 요소 읽기 및 변경하기
일단 요소를 보유하면, 객체의 속성을 읽고 변경하는 것처럼 속성을 통해 읽고 변경합니다. 이것이 페이지가 실제로 움직이기 시작하는 곳입니다.
가장 많이 사용할 속성은 textContent이며, 요소 내부의 텍스트입니다. 읽거나 설정할 수 있습니다:
const total = document.querySelector("#total");
total.textContent = "42 items"; // 페이지가 이제 "42 items"를 표시합니다무언가의 보이는 방식을 변경하려면, 보통 클래스를 추가하거나 제거하고 CSS에 스타일링하도록 합니다. classList는 그를 위해 세 가지 메서드를 가지고 있습니다:
const card = document.querySelector(".card");
card.classList.add("selected"); // 클래스 추가
card.classList.remove("selected"); // 제거
card.classList.toggle("selected"); // 없으면 추가, 있으면 제거단일 스타일을 .style을 통해 직접 설정할 수도 있으며, setAttribute를 사용하여 src 또는 href 같은 속성을 설정합니다:
card.style.color = "crimson"; // 하나의 인라인 스타일
const avatar = document.querySelector(".avatar");
avatar.setAttribute("src", "min-ji.jpg"); // 이미지 소스 설정먼저 classList에 도달하고 .style은 일회성 조정만 합니다. 스타일링을 CSS에 유지하면 한 곳에 유지되기 때문입니다.
textContent로 요소 내 텍스트를 설정하고, classList.add, remove, toggle을 사용하여 클래스를 추가하거나 제거하여 외관을 변경합니다. 일회성 조정을 위해 .style을 사용하고 이미지 소스 같은 것들을 위해 setAttribute를 사용하세요. 스타일링이 CSS에 있도록 클래스에 의존하세요. 요소 생성 및 제거하기
이미 존재하는 요소 변경은 멀리 갈 수 있지만, 때로는 아직 아무것도 없습니다: 추가하는 할일, 도착하는 검색 결과. 그를 위해 새 요소를 구축하고 트리에 배치하며, 오래된 것들을 제거합니다.
document.createElement로 새 요소를 만들고, 일부 콘텐츠를 제공한 다음, append를 사용하여 페이지에 추가합니다:
const list = document.querySelector(".todo-list");
const item = document.createElement("li"); // 새 <li>, 아직 페이지에 없음
item.textContent = "귀리 우유 사기"; // 일부 텍스트 제공
list.append(item); // 이제 리스트 끝에 나타남createElement의 새 요소는 어딘가에 append될 때까지 메모리에만 존재합니다. 그 단계가 페이지에 표시하게 합니다. 요소를 페이지에서 제거하려면, 그것에 대해 remove를 호출합니다:
item.remove(); // 페이지에서 제거됨document.createElement로 새 요소를 구축하고, textContent로 텍스트를 제공하며, append로 페이지에 배치합니다. 신선한 요소는 추가될 때까지 메모리에만 있으므로, 그 단계가 나타나게 합니다. 페이지에서 제거하려면, 그것에 대해 remove를 호출하세요. DOM이 여기서 나아가는 곳
선택, 읽기, 변경, 생성, 제거는 JavaScript가 페이지에 하는 대부분의 것을 다루며, 모두 동일한 움직임입니다: 트리의 객체를 찾아 속성을 변경합니다. DOM이 객체이기 때문에, 객체에서 배운 모든 것이 직접 여기에 적용되며, 이 장의 작은 메서드 집합(querySelector, textContent, classList, createElement, append)이 대부분의 도구 키트입니다.
지금까지 빠진 것은 타이밍입니다. 여기의 모든 예제는 한 번 위에서 아래로 실행되지만, 실제 페이지는 독자가 하는 것에 응하여 변경됩니다: 클릭, 키 입력, 제출된 폼. DOM 변경을 그 순간에 연결하는 것은 이벤트이며, 다음 장이고, addEventListener는 "사용자가 이것을 했다"를 "따라서 페이지가 그것을 한다"에 연결합니다. 선택과 변경이 이벤트 응답과 함께 앉으면, 이 핸드북의 나머지가 목표로 하는 대화형 페이지를 구축할 수 있습니다.