document.body.innerHTML += '<h1></h1>'
document.addEventListener('DOMContentLoaded', ()=>{})
를 사용. DOMContentLoaded
라는 이벤트가 발생하면 ()=>{}
콜백함수 호출document.querySelector('h1')
<h1 id="header" class = "header2 center"></h1>
const h1 = document.querySelector('h1')
h1.style.color = 'red'
document.querySelector(#header)
<h1 id="header" class = "header2 center"></h1>
document.querySelector(#header).style.backgroundColor = 'red'
<h1 id="header" class = "header2 center"></h1>
document.querySelector(.header2)
document.querySelector(.header2.center) //클래스 선택자가 2개일때
document.querySelector(h1#header.header2.center)
document.querySelector(.header2)
<input type ="text">
document.querySelector('[type = text]').style.borderRadius = 10px
document.querySelector('body input')
<script>
document.addEventListener('DOMContentLoaded', ()=>{
for(const element of document.querySelectorAll('input')){
element.style.backgroundColor = 'red'
}
})
</script>