Frontend/JavaScript
DOM API 란?
Tonkatsu
2021. 12. 1. 21:04
DOM은 Document Object Model의 약자이다.
프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다.
HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다.
DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다.
querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다.
아래와 같은 HTML이 있다고 해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
<script src="main.js"></script>
</body>
</html>
만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다.
// 호출
let firstDiv = document.querySelector(".first");
//텍스트 바꾸기
firstDiv.textContent = "first";
첫 번째 글이 바뀐 것을 확인할 수 있다.
만약 모든 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다.
// 호출
let allDivs = document.querySelectorAll("div");
// 텍스트 바꾸기
allDivs.forEach((x, i) => (x.textContent = `${i + 1}번째 입니다.`));
모든 div에 영향을 준 것을 확인할 수 있다.