DOM
Document Object Model = HTML 문서를 트리 구조로 구조화한 브라우저가 제공하는 객체
DOM Tree 에서 각각의 DOM 요소 = 노드(Node)
Javascript가 DOM API를 통해 페이지 요소를 조작(CRUD)할 수 있다
다양한 DOM API에 대해 알아보자
문서 탐색 및 선택
document.querySelector(선택자)
제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 요소를 반환한다
const element = document.querySelector(selectors);선택자에 태그명을 입력할 경우, 아무것도 붙이지 않는다
class명을 입력할 경우, 앞에 .을 붙여준다
id명을 입력할 경우, 앞에 #을 붙여준다
예시 코드
querySelector을 이용해서 div 태그의 폰트 색깔 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>QuerySelector</title>
<style></style>
</head>
<body>
<div class="class1">첫번째 div</div>
<script>
document.querySelector("class1").style.color = "tomato"
</script>
</body>
</html>
document.querySelectorAll(선택자)
지정된 셀렉터 그룹에 일치하는 document의 Element 리스트를 나타내는 정적 NodeList를 반환한다
const elementList = parentNode.querySelectorAll(selectors);해당 선택자를 가지고 있는 모든 Dom 요소를 배열의 형태로 반환하기 때문에
index 혹은 배열 메서드로 접근할 수 있다
예시 코드
1. querySelectorAll을 이용해서 첫번째 div 태그의 폰트 색깔 바꾸기
2. querySelectorAll을 이용해서 모든 div 태그의 폰트 색깔 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>QuerySelector</title>
<style></style>
</head>
<body>
<div class="class1">첫번째 div</div>
<div class="class2">두번째 div</div>
<div class="class3">세번째 div</div>
<script>
document.querySelectorAll("class1")[0].style.color = "tomato" // 1번
document
.querySelectorAll("class1")
.forEach(div => div.style.color = "tomato") // 2번
</script>
</body>
</html>
document.getElementsByTagName(선택자)
HTML 요소의 HTMLCollection과 주어진 태그명을 반환한다
const elements = document.getElementsByTagName(name);
document.getElementById(선택자)
주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다
const element = document.getElementById(id);
document.getElementsByClassName(선택자)
주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection을 반환한다
const elements = element.getElementsByClassName(names);
스타일 조작
element.style.propertyName = value
DOM 요소의 인라인 스타일 속성을 설정한다
element.style.속성명 = 속성값
이벤트 처리
addEventListener(event, Listener)
DOM 요소에 이벤트 리스너를 추가한다
addEventListener(이벤트 종류, 이벤트 발생시 실행할 콜백 함수);
[참고자료]
https://developer.mozilla.org/ko/
반응형
'Front-end > Javascript' 카테고리의 다른 글
| [JS] 구조 분해 할당(Destructuring) (1) | 2025.01.20 |
|---|---|
| [JS] 동기(synchronous)와 비동기(asynchronous) (2) | 2025.01.17 |
| [JS] fetch에 대해 알아보자 (0) | 2025.01.10 |
| [JS] addEventListener + 이벤트 종류 (1) | 2025.01.10 |
| [JS] 비동기 처리 async / await에 대해 알아보자 (0) | 2025.01.10 |