혼공 JS 7장

문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델

DOMContentLoaded : 문서 객체를 조작할때 이벤트 사용

documnet.body.innerHTML : 문서의 바디안에 있는 html코드를 자바스크립트로 조작할 수 있게 해주는 코드

DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행

head안에 document.body.innerHTML을 쓰기위해서는 documnet.addEventListener 이벤트 사용합니다

document.addEventListener('DOMContentLoaded',()=>{
	const h1 = (text)=>`<h1>${text}</h1>`
    documnet.body.innerHTML+= h1('ㅎㅇ')
})

<h1>ㅎㅇ<h1> 형태로 출력됨

문서 객체 가져오기

document.head
documnet.body
documnet.title

document.querySelector(선택자)
document.querySelectorAll(선택자)

태그 선택자 - 태그

아이디 선택자 - #아이디
클래스 선택자 - .클래스
속성 선택자 - [속성=값]
후손 선택자 - 선택자A, 선택자B

문서객체.textContent : 입력된 문자열을 그대로 넣습니다
문서객체.innerHTML : 입력된 문자열을 HTML형식으로 넣습니다

속성조작

문서객체.setAttribute(속성이름,값) - 특정 속성에 값을 지정
문서객체.getAttribute(속성이름) - 특정 속성에 추출

스타일 조작

.style 속성을 사용 / style속성은 객체