[JavaScript] Document Object

JavaScript는 HTML 요소에 접근하고 읽을 수 있게 설정됨

 

 

HTML에 접근할 수 있을 뿐 아니라, HTML을 변경하는 것도 가능

 

 

→ JavaScript를 통해 console에서 변경한 내용으로 HTML 문서 내용은 변하지 않음, 새로고침 하면 다시 원래 title로 변경됨

 

브라우저는 HTML 정보가 들어있는 Document 라는 객체(Object)를 전달

이러한 객체의 전달로 사용자가 연결하는 작업 없이도 JavaScript는 이미 HTML에 연결되어있다는 것을 알 수 있음

 

 

함수를 이용해 element 찾는 방법 1

HTML 문서 body 태그 내부에 h1#title 태그 작성

<h1 id="title">Grab me!</h1>

 

아래 document의 내장 객체를 이용해 #title 요소를 가져와서 변수에 저장

const title = document.getElementById("title");

 

해당 변수로 태그 내부의 텍스트도 변경 가능

title.innerHTML = "Got you!";

 

변수를 콘솔창에 태그로 나타낼 수 있고,

console.log(title);

 

dir 탐색이 가능한 트리를 나타낼 수도 있음

console.dir(title);

 

함수를 이용해 element 찾는 방법 2

HTML 문서 body 태그 내부에 div.hello > h1 태그 작성

<div class="hello">
    <h1>Hello</h1>
</div>

 

querySelector 를 이용해서 div(태그명) / .hello(클래스명)의 h1 요소를 가져와 변수에 저장

const hello = document.querySelector(".hello h1");
// or
const hello = document.querySelector("div h1");

querySelector(): element를 CSS 방식으로 검색 가능

 

만약,

body 태그 내부에 div.hello > h1 태그가 여러 개 있다면, querySelector() 함수는 가장 첫번째에 있는 요소를 가져오게됨

<div class="hello">
    <h1>Hello 1</h1>
</div>
<div class="hello">
    <h1>Hello 2</h1>
</div>
<div class="hello">
    <h1>Hello 3</h1>
</div>

 

querySelectorAll() 함수를 사용해서 원하는 요소들을 array로 가져오기

const hello = document.querySelectorAll(".hello h1");