HTML에서 JS로 데이터 뽑아오기

💡prompt < 아주 오래된 function이다.

현재 많은 브라우저드리 팝업을 차단하기도하며, css적용이 어려워 선호되지 않음.

const age = prompt("How old are you?");
console.log(typeof age);
//return type : String

💡document 라는 object 가 있는데 html의 거의 모든 property를 웹브라우저 console에서 JS로 호출가능하다.

<div class = "hello" id ="title">
	<h1>Grab me !</h1>
    <h1>Grab me !</h1>
    <h1>Grab me !</h1>
</div>

document.body;
document.getElementById("title");
document.getElementByClassName("hello");
document.getElementByTagName("h1"); ("div", "body", "img" 다됨) ⇨ 만약 여러개라면 배열을 출력한다.
document.querySelector("div.hello:first-child h1"); // (.)은 class를, (#)은 id를!
// element를 CSS방식으로 검색할 수 있다.
// 위처럼 여러개의 h1있다 하더라도 첫번째 element만을 출력한다.
// 만약 querySelector로 전 h1을 가지고 오고 싶다면, 아래의 코드와 같이 작성하면됨.
document. querySelectorAll(".hello h1"); //array반환
document.header;
//등등..

⭐️ 특히 JS개발자들은 document.querySelector("") 사용을 선호한다.