window.document는 무엇일까?

현재 브라우저에 렌더링 되고있는 문서. 페이지 콘텐츠.
즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다.
이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다.
또한 문서에 대한 공통의 속성과 메소드를 제공한다.
즉 다양한 API(Application Programming Interface)를 제공한다.

요소를 선택하기 위해 사용할 수 있는 대표적인 메소드로는document.querySeletor와 document.getElementById가 있다
→ 두 메소드는 모두 요소(Element) 객체를 반환한다!

1. document.querySeletor

선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내
첫 번째 요소(Element)를 반환한다.
일치하는 요소가 없으면 '없다'라는 의미의 null데이터를 반환한다.
인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS선택자'를 의미한다

// p 태그를 선택하자!
document.querySelector("p");

//id가 text인 요소를 선택하자!
document.querySelector("#text");

//class가 text인 요소를 선택하자!
document.querySelector(".text");

2. document.getElementById

id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내
첫 번째 요소(Element)를 반환한다.
일치하는 요소가 없으면 '없다'라는 의미의 null데이터를 반환한다.
인자로 전달되는 선택자는 문자열 타입의 'id'를 의미한다.

// id가 text인 요소를 선택하자!
document.getElementById("text");

// id가 image인 요소를 선택하자!
document.getElementById("image");

3. textContent

해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
textContont를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있다.

// p 요소를 반환받아 상수로 이름을 붙인다!
const p = document.querySelector("p");

// p 요소의 textContent 속성을 콘솔에 출력해보자!
console.log(p.textContent)

// p 요소의 textContent 값을 변경해보자!
p.textContent = "텍스트를 이걸로 바꿔!"