[JavaScript] document

document 

📌 document 

: HTML를 가리키는 객체.

  JavaScript에서 HTML에 접근 가능함. 

 

📌 document의 속성을 가져올 수 있고, 변경할 수도 있음. 

 

💡 console.dir()

: element를 더 자세히 볼 수 있음. 

 

JavaScript에서 HTML에 접근하는 방법 - id

📌 document.getElementById( " [id] " )

: 해당 id의 element를 얻을  수 있음. 

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

 

JavaScript에서 HTML에 접근하는 방법 - className

📌 document.getElementsByClassName( " [className] " )

: 해당 class name의 element를 얻을  수 있음. 

  객체가 아닌 array가 반환됨. 

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

 

JavaScript에서 HTML에 접근하는 방법 - tagName

📌 document.getElementsByTagName( " [태그명] " )

: 해당 class name의 element를 얻을  수 있음. 

  객체가 아닌 array가 반환됨. 

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

 

JavaScript에서 HTML에 접근하는 방법 - querySelector

📌 document.querySelector( " [element] " )

: element를 CSS 방식으로 가져올 수 있음. 

  하나의 element만 반환함. 

  여러 개가 있을 경우, 가장 앞에 element가 나옴.

 

📌 document.querySelectorAll( " [element] " )

: 해당되는 element들을 array로 가져옴.