렌더링?
브라우저가 html코드 문서를 해석하고 화면을 통해 보여주는 과정을 말한다.
브라우저가 html코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생성한다.
이를 DOM이라 하며, 브라우저는 DOM을 통해 웹 콘텐츠들을 렌더링한다.
Document Object Model, DOM
DOM은 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
HTML ➡ DOM + javascript ➡ 화면
querySelector & textContent
document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다. 일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환한다. 인자로 선택되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미한다.
ex)
//p 태그 선택
document.querySelector("p");
//id가 text인 요소 선택
document.querySelector("#text");
//class가 text인 요소 선택
document.querySelector(".text");
textContent 속성은 해당 객체(요소)가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있다.
ex)
//p요소를 반환받아 상수로 이름을 붙인다.
const p = document.querySelector("p");
//p요소의 textContent 속성을 콘솔에 출력
console.log(p.textContent)
//p요소의 textContent 값을 변경
p.textContent = "변경할 텍스트"
DOM을 다루는 명령문
관련 메소드
document.querySelector(x) CSS 선택자 x를 기반으로 첫 번째 요소를 선택한다.
document.querySelectorAll(x) CSS 선택자 x를 기반으로 여러 요소를 선택한다.
document.getElementById(x) id속성의 값을 기반으로 요소를 선택한다.
document.getElementByClassName(x) class 속성의 값을 기반으로 여러 요소를 선택한다.
document.write(x) 문서에 콘텐츠 X를 추가 입력한다.
관련 속성
Element.textContent 요소가 가진 텍스트 콘텐츠를 반환한다.
Element.innerHTML 요소 내에 쓰여진 HTML 코드를 텍스트 형태로 반환한다.
Element.className 요소의 class 속성값을 반환한다.
Element.style 요소의 style 관련 속성값들을 반환한다.
Element.title 요소의 title 속성값을 반환한다.
