[JavaScript] DOM Methods

DOM( Document Object Module )

자바스크립트는 HTML의 모든 요소를 가져와 그것들을 Object로 만들 수 있다.

const title = document.getElementById('title');
console.log(title);
console.error("Holy.. ");

document(문서) : 최상위 객체를 가리킨다. 현재 자바스크립트가 로드된 웹 문서. (ex) index.html

>>> index.html 문서에서 id="title" 인 HTML 요소를 찾아 title 이라는 변수와 연결시켜주고 있다.

자바스크립트를 통해 HTML을 수정할 수 있고, class 를 추가하고, 애니메이션을 변경할 수도 있다. 

새로운 이벤트 생성 / 이벤트에 대해 반응(react) / 요소의 추가 or 제거

※ HTML 문서의 객체를 얻어오는 여러 메소드

• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByTagNameNS()
• document.querySelector()
• document.querySelectorAll()

index.css 파일	index.js 파일
body {      background-color: aquamarine;  } h1 {     color: yellow; }	const title = document.getElementById('title'); title.style.color = 'blue'; document.title = 'Hello Title'

> 자바스크립트에 의해 노란색이 아닌 파란색으로 변경된 것을 볼 수 있다.