DOM

: Document Object Model

html을 쉽게 접근하여 수정할 수 있도록 만든 모델

+) console.log() : 콘솔 출력

---

---

document

getElement(s)

• 화면의 html 문서를 불러옴

• document.getElementById('js')
  : id가 'js'인 태그를 불러옴

• document.getElementsByClassName('클래스명')[배열]
  : 클래스명 일치하는 [배열]번째 객체 선택

• document.getElementsByTagName('태그이름');
  : 해당 태그의 모든 요소 노드들을 탐색하여 반환 (여러 개면 배열로 반환)

---

querySelector

: css 선택자를 만족시키는 하나의 요소 노드를 탐색해 반환

• document.querySelector('css 선택자');
  : css 선택자에 일치하는 첫 번째 Element를 반환 (없으면 NULL)
• document.querySelectorAll('css 선택자');
  : css 선택자 그룹에 일치하는 document의 element 리스트인 NodeList를 반환

+) css 선택자 ?
.[class] 의 '.' 또는 #[id]의 '#' 같은 선택자

---

.innerHTML

: HTML 태그의 안쪽 내용 불러옴

• document.getElementById('js').innerHTML
  : js태그의 안쪽 내용을 불러옴 (안쪽내용 : <태그>안쪽내용</태그>)

• document.getElementById('count').innerHTML = content.length;
  : count 태그의 안쪽 내용을 content.length로 넣기

예시

[html]
<ul id="animals">
	<li class="animal">lion</li>
    <li class="animal">tiger</li>
    <li class="animal">bear</li>
</ul>

[js]
const animals = documentgetElementById("animals");
animals.innerHTML += "<li class="animal">cat</li>"; //cat 추가 가능

---

.value

• document.getElementById('js').value
  : input 태그에 들어간 입력 값을 가져옴

---

classList

: 특정 요소에 class 추가

• document.querySelectorAll(".animal")[0].classList.add("클래스명"); : 클래스 추가
• document.querySelectorAll(".animal")[0].classList.remove("클래스명"); : 클래스 삭제
• document.querySelectorAll(".animal")[0].classList.toggle("클래스명"); : 토글 (추가/삭제 모두 구현 -> 있으면 삭제, 없으면 추가 반복)

---

---

dataset

dataset이란?

: 사용자가 해당 요소에 커스텀 속성을 추가한 객체

dataset 사용법

1. HTML 태그에 접두어(data-)가 붙은 속성을 추가, 그곳에 사용하고자 하는 값 지정
2. js에서 요소를 선택하고, dataset 객체에서 커스텀속성을 읽어들음 (접두어 생략)

+) dataset 속성의 값은 개수 제한이 없다

예시

[html]
<ul class="list">
        <li class="tab-button" data-id="0">Dog</li>
        <li class="tab-button" data-id="1">Tiger</li>
        <li class="tab-button" data-id="2">Bear</li>
</ul>

[js]
document.querySelectorAll('.list')[0].addEventListener("click",function(e){
    tabBtn(e.target.dataset.id);
});

---

---

이벤트 객체

: 이벤트 발생 시 이벤트 정보를 담고 있는 동적 객체

• 이벤트 핸들러의 첫 번째 인수로 전달됨
• 이벤트 객체를 전달 받기 위해서는 객체를 전달받을 매개변수를 명시적으로 선언 (주로 e)
• 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록한 경우, 이벤트가 아닌 다른 이름으로 이벤트 객체를 전달 받을 수 없음