03. JS 요소 접근방법

🔅DOM(Document Object Model)

웹 문서(HTML)의 모든 요소를 객체 형식으로 표현하는 방법
-> 문서 내 특정 요소에 접근하는 방법을 제공

DOM을 이용한 요소 접근 방법

1. id 속성값으로 접근하기

document.getElementById("id속성값");

2. class 속성값으로 접근하기

document.getElementsByClass("class 속성값");
--> H

• 요소.classList : 요소가 가지고 있는 클래스를 배열로 반환
• 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거
• 요소.classList.add("클래스명") : 요소의 특정 클래스 추가
• 요소.classList.toggle("클래스명") : 클래스가 있으면 제거, 없으면 추가

3. name 속성값으로 접근하기

document.getElementsByName("name 속성값");

4. 태그명 tag name으로 접근하기

document.getElementsByTagName("태그명");

5. CSS 선택자를 이용해서 접근하기

1) document.querySelector("#test");

• 단일 요소를 선택하는 방법
• 만약 선택된 요소가 여러개이면(클래스, 태그명 등) 첫번째 요소만 선택한다

2) document.querySelectorALL("CSS 선택자");

• 선택된 모든 요소를 얻어와서 배열 형태로 반환 (각각의 index에 선택된 요소가 하나씩 있음)