[JavaScript] 노마드코더 바닐라JS 챌린지 6일차 복습 중 -(1)

JS는 HTML을 가져오는게 아니라 object를 가져오는 거다

 

document는 hthml에 접근하기 위한 object

element는 object 하위의 정보들

 

getElementBy~가 매우매우 중요하다 -> 이거로 element를 찾고 나면 그 html을 JS에서 수정해줄 수 있다.

암튼 JS로 html object들의 element들을 수정해줄 수도 있다

생코님 표현대로 하자면 이게 혁명적인 일이지 않을까 싶다.

getElementBy~라는 한줄의 코드 덕분에 html을 JS에서 수정해줄 수 있다니..ㅎㅎ

다만, getElementBy~를 통해 가져올 element의 이름을 똑같이 써줘야 한다

 

getElementsBy~는 여러개 가져올 때

 

제일 좋은 건 querySelector를 이용해서 CSS selector를 전달하기!

하나의 element만 return해준다

getElementBy는 array도 return해주기 때문에 사용하기에 용이하지 않다고 한다

querySelctorAll로 전부 호출해서 Array로 반환 가능

 

 

const a=document.querySelector("#hello");//CSS처럼 #으로 id호출 .으로 class 호출

const a=document.getElementById("hello");//암튼 둘은 같은 일을 해준다

 

const a=document.querySelector("div.hello:first-child h1");//class hello를 가진 div 내부의 first-child인 h1을 찾아오는 코드 매우 강력한 것이다