[JavaScript] document 객체

윈도우 객체의 속성인 document

window.document 라고 접근을 해야하지만 전역객체인 window이기 때문에

document로 사용가능합니다

document는 HTML에 관한것을 담당하는 객체이며 태그를 선택하고 조작하는데 사용합니다.

window 객체가 브라우저 창이라면 document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체입니다.

자주 사용하는 document 객체를 적어보겠습니다

let ex1 = document;
console.log(ex1);

let ex2= document.querySelector('#hi'); 
console.log(ex2);

let ex3= document.querySelector('.hello');
console.log(ex3);

let ex4= document.getElementById('hi');
console.log(ex4);

let ex5= document.querySelectorAll('p');
console.log(ex5);
console.log(ex5[0]);
console.log(ex5[1]);
console.log(ex5[2]);

1. querySelector 의 경우 css 선택자로 선택합니다.
   1. 아이디는 # , 클레스는 . (점) ,태그명은 그대로입니다.
   2. 부모 > 자식, 부모 자손 등 다양하게 사용가능합니다.
2. getElement~ 의 경우 앞에 Id, ClassName, Name, TagName등은 별도의 선택자없이
   클레스, 이름, 태그를 직접 적습니다
3. getElementById를 제외한 나머지는 getElementsBy~ 들은 Elements로 여러개가 선택이 됩니다
   배열의 형태를 하고있습니다. querySelectorAll 도 같습니다

결과

 

이외에도

 

document.haed , body, title 등 html의 head, body에 접근하고, 문서의 제목에 접근하고 바꿀수 있습니다.