[JavaScript] document

document는 자바스크립트 콘솔에서 볼 수 있는 object인데, 해당 웹사이트의 HTML에 있는 코드를 자바스크립트 관점에서 보여주도록 object로 설정되어 있다. 그래서 콘솔창에 document.title을 치면 HTML에 저장된 title이 나온다. 이처럼 자바스크립트는 HTML을 읽어올 수 있다. 읽어올 뿐만 아니라 HTML을 변경할 수도 있다. 자바스크립트에서의 document.title = "Hi" 이를 통해 실제로 HTML의 title이 변경된다. 이런 식으로 자바스크립트는 사실 HTML에 이미 연결되어있다.

 

const title = document.getElementById("title");
console.log(title.id);
console.dir(title.id);
console.log(title.className);

 

위와 같은 document의 함수를 통해 해당 아이디가 있는 element를 갖고와서 저장된 정보를 알아보고 자바스크립트를 통해 정보를 변경할 수 있다. 만약 콘솔에 단순히 띄우는 것이 아니다 element의 내부를 구체적으로 알고 싶으면 console.dir(); 를 실행하면 된다.

 

또한 특정 class나 태그의 element를 가지고 오고 싶다면 아래의 방식으로 쓰면 된다.

const title = document.getElementsByClassName("title");
const title = document.getElementsByTagName("title");

그런데 그렇게 되면 해당하는 모든 class나 태그가 array형식으로 title에 저장되기 때문에, 우리가 원하는 특정적인 것만 지정할 수 없다.

const title = document.querySelector(".title h1");

그래서 querySelector를 사용하여 클래스 이름과 해당 클래스에 속한 태그를 입력하여 갖고 오는게 편하다. 이게 실질적으로 자주 사용하는 방식이 될 것이다. 왜냐면 querySelector의 경우 단 하나의 element만 반환하기 때문이다. 설사 위의 예시에서 ".title h1"이 여러개여도 가장 위의 것 하나만 반환하게 된다. 만약 모두 갖고 오고 싶다면 querySelectorAll을 사용하면 된다. 또한 querySelector는 CSS의 selector 그자체를 전달하기 때문에 . #같은 class, id를 지칭하는 CSS 기호가 있어야한다.

 

주로 쓰는 것은 querySelector가 될 것이고, 가끔 아이디로 지칭하고 싶을 때 getElementById를 사용하게 된다고 생각하면 된다.

 

document의 한가지 특징은 document에서 중요 부분을 담당하는 body, head, title과 같은 것들은 .으로 바로 호출할 수 있다는 것이다. 그 이외의 div와 같은 것들은 위에서 말한 querySelector을 통해 찾아와야 한다.

document.body
document.head
document.title