1. DOM이 뭘까요?
JavaScript가 HTML에 접근하려면 document라는 전역객체를 통하여 접근할 수 있습니다.
document 객체는 HTML 문서를 나타낸다고 말할 수 있습니다.
즉, DOM은 HTML인 웹페이지와 스크립팅 언어JavaScript를 서로 잇는 역할을 합니다.
dom으로 html에 접근해야 하는 이유는 우리가 보는 사이트의 자료들이 모두 HTML내부에 저장된 것이 아니기 때문입니다.
따라서 document 객체로 요소element를 접근하게 해줍니다.
요소의 내용 'content'는 innerHtmml으로 접근하고 수정할 수 있습니다.
이제부터 innerHTML을 포함한 다른 dom 사용 예시를 보겠습니다.
2. DOM 사용하기
1. .innerHTML
document.body.innerHTML = '내용 다 바꿈';위의 예시를 실행한다면 body 안에 얼마나 많은 요소들이 있던지간에 '내용 다 바꿈'이라는 텍스트로 바꿔집니다.
body가 아닌 css selector를 사용하여 접근할 수도 있습니다.
2. 특정 element에만 접근
let blueElement = document.querySelector('.blue');-> document에서 querySelector를 사용하여 blue class를 선택한 것을 선택
document.querySelector('p.name');-> 위에서와 비슷하지만 p tag 안 name class를 선택
blueElement.style.backgroundColor = 'blue';-> blueElement라는 엘리먼트의 배경색을 blue로
여기서 주의할 점은 위의 예시에서 보듯이 background-color대신 backgroundColor으로 접근하였습니다.
JavaScript에서 style 수정할 때 hypen(-)은 사용할 수 없습니다!
3. 또한 새로운 요소를 만들기
.createElement (tagName) 함수를 사용하여 요소(element)를 마늘 수도 있습니다. 따라서 HTML 어디 위치에 들어가야 할지는 어떤 element에 append(추가)를 해주어야 합니다.
4. 요소 뒤에 붙이기
appendChild
appendChild
innerHTML : 내용 전부 대체
appendChild: 요소의 뒤쪽에 붙임
✅ querySelector vs getElementById vs getElementByClassName
