1. DOM이란?
- DOM은 바로 문서 객체 모델을 뜻한다.
- 쉽게 말해 웹페이지를 구성하는 자바스크립트 객체들의 집합이다.
2. DOCUMENT
- 새로운 페이지를 열때마다 해당페이지의 콘텐츠를 이용한 문서 객체 모델이 생성되는데
DOCUMENT는 페이지의 콘텐츠를 나타내는 객체의 모음집과 같다.
- CSS 스타일을 바꾸거나 요소를 숨기거나 할 수 있다.
3. getElementByID()
- 이 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다.
- id가 일치하는 요소를 찾으면 해당값이 나타나고 없으면 null로 나타낸다.
- id로 선택할때만 작동하며 클래스 이름으로는 작용하지 않는다.
ID가 name인 경우
4. getElementByTagName()
-이 메서드에 문자열을 전달하면 일치하는 tag이름을 가진 요소를 찾아낸다.
5. getElementByCalssName()
-이 메서드에 문자열을 전달하면 일치하는 class이름을 가진 요소를 찾아낸다
6. querySelector()
이 하나의 메서드를 사용해서 id, clss, 요소타입등을 선택할수 있다.
-일치하는 첫 번째 요소만 반환한다.
7. querySelectorAll()
위와 같지만 일치하는 모든 요소를 반환한다.
8. TextContent & innerText
TextContent는 요소 안에 있는 모든 요소를 반환하므로 안에 있는 모든 콘텐츠가 다 나타난다.
innerText는 현재 보이는 내용에 따라 달라진다.
++단 h1의 텍스트를 변경하는데 쓸 수 는 없다.(아래 예시로 원하는데로 안바뀐다.
9. InnerHTML
위 문제를 해결하기위한것으로 덮어쓴다고 생각하면 좋다.
- 콘텐츠를 업데이트 하거나 변경할때 사용한다.
