이번 페이지에서는 DOM에 대해 알아볼 예정이다.
브라우저는 html 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 DOM(document object model)이라고 하며 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
html문서 > DOM > 화면에 표출
이라고 생각하면 된다.
그리고 자바스크립트는 이러한 DOM을 수정하여 html 문서를 변형시킨 후 화면에 표출시키는 프로그래밍 인터페이스(interface)이다.
DOM에 접근하는 방법은 어떻게 될까?
브라우저 객체에 접근하여 html요소를 특정하여 접근하면 된다.
우선 브라우저 객체에 접근하기 위하여 window.document라는 명령어를 쓴다.
직역하면 window에 있는 document문서에 접근한다는 의미이다.
querySelector는 html의 선택자를 인자로 전달받아 전달받은 선택자와 일치하는 html요소를 반환한다.
일치하는 요소가 없다면 'null'값을 반환하게 된다.
document.querySelector("p");
document.querySelector("#text");
document.querySelector(".text");querySelector와 textContent라는 속성을 통해 DOM 요소를 수정할 수도 있다.
<p>기존 텍스트</p>
const p = document.querySelecotr("p");
console.log(p.textContent)
p.textContent = "텍스트를 이걸로 바꾼다."textContent 속성으로 값을 바꿀 수 있다.
여기까지 공부하면서 의문점이 생겼다.
const로 정의한 p는 상수인데 그 데이터 값을 바꿀 수 있는 것인가?
그 답은 yes이다.
const에 할당된 객체 자체는 바뀌지 않는 것이 맞다.(
) 하지만 그 안의 속성 값은 수정할 수 있다.
재할당이 아닌 참조된 객체의 수정이므로 가능하다.
hyohyo