DOM(Document Object Model 문서 객체 모델)
: DOM은 웹 페이지를 하나의 문서(Document)로 보고. 그 문서의 스타일 / 구조 / 내용을 변경 가능하게 한다.
Javascript를 이용해서, 우리는 위에 설명한 것과 같이 객체의 스타일 / 구조 / 내용을 바꿀 수 있는데, <body>의 <p id="p1">에 텍스트 값을 넣어보도록 하자.
HTML 파일을 열어서 크롬의 개발자 모드를 통해 확인해보면, <p id="p1"> 객체 안에 "Hello" 텍스트가 추가된 것을 볼 수 있다.
*document 안에 요소 선택하는 방법
1) document.querySelector() > 위에 예시와 동일하게, 해당 요소를 선택한다.
2) document.querySelectorAll() > 해당되는 요소 모두 선택한다.
3) document.getElementsByTagName() > 해당 태그 이름을 가진 요소를 모두 선택한다.
4) document.getElementById() > 해당 아이디의 요소를 선택한다.
5) document.getElementByClassName() > 해당 클레스의 요소를 선택한다.