자바스크립트로 DOM 요소를 어떻게 조작할까??
DOM은 자바스크립트가 자신에게 접근해서 조작할 수 있는 방법을 제공한다. DOM이 제공하는 방법을 활용해 웹 요소를 조작하기 위해서는 DOM 트리의 구조에 대해 잘 알고 있어야 하는데, DOM 트리는 아래의 그림을 통해 이해할 수 있다.
DOM 트리
자바스크립트를 사용해 DOM 요소에 접근하려면, DOM이 제공하는 방법인 DOM API를 사용해야 한다. DOM API를 이용해 요소들을 조작하려면, 가장 먼저 조작하고자 하는 요소를 찾은 다음, 해당 요소를 선택해 선택된 요소를 조작해야 한다.
조작해야 하는 요소를 찾고, 그다음에는 DOM 트리의 가장 위쪽에 위치한 노드인 문서 노드에 접근한다. 그다음, 요소 노드, 어트리뷰트 노드, 텍스트 노드를 순서대로 거쳐 조작할 요소가 위치하고 있는 노드까지 접근한다.
만약 조작할 요소가 다음과 같다면, 먼저 가장 위에 있는 문서 노드에 접근한 후, 위에서 아래 방향으로 다음과 같이 순서대로 접근한다. 그럼 이제 본격적으로 DOM API를 사용해서 DOM 요소들을 조작해 보자.
index.html
HTML에서 요소를 작성할 때에는 class와 id를 사용해 요소에 이름을 지정할 수 있다. 이름을 나타내는 요소에는 name을, 그리고 색상을 나타내는 div 요소에는 color를, 그리고 나이를 나타내는 div 요소에는 age를 작성한다.
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="animal-info">
<div class="name">강아지</div>
<div class="color">갈색</div>
<div class="age">2살</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
class는 동일한 값을 여러 요소에 적용할 수 있지만, id 값은 고유한 값으로 같은 값을 여러 요소에 지정할 수 없다. 그렇기 때문에 보통 class는 반복적으로 사용되는 스타일을 적용해야 할 때 사용하고, header와 footer 같은 요소나 내부에 있는 세부적인 스타일을 적용할 때에는 id를 사용한다. 그렇기 때문에 class 이름이 animal-info인 요소 내부의 div들의 속성을 전부 id로 변경해 보자.
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="animal-info">
<div id="name">강아지</div>
<div id="color">갈색</div>
<div id="age">2살</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
document.getElementById()
본격적으로 DOM API에 대해 살펴보자. getElementById는 특정 요소를 id 값으로 가져온다는 의미로, 실제로 특정 요소의 객체 값을 반환한다. DOM에서 어떤 요소를 찾을 때에는 가장 먼저 문서 노드, 즉 document에 접근을 해야 하기 때문에, 가장 먼저 문서 노드에 접근한 다음 getElementById를 사용해서 id 값이 color인 요소를 반환한 다음, 반환된 값을 출력해 보자.
getElementById는 괄호 안에 원하는 요소의 id값을 작성하면 해당 요소를 반환하는 DOM API다. 먼저 getElementById의 괄호 안에 원하는 요소 노드의 아이디인 color를 작성하고, 그 반환 값을 $color라는 변수에 할당해 보자.
let $color = document.getElementById("color");
console.log($color);
DOM API를 사용해 특정 요소를 변수에 할당할 때에는 일반적으로 요소를 할당할 변수의 이름 앞에 ‘$’ 기호를 붙여 작성하거나, 변수명의 뒤에 Element를 작성한다. 이와 같은 경우에는 $color 혹은 colorElement로 작성할 수 있다. 코드를 실행하면 id 값이 color인 div 요소가 출력된다.
document.querySelector()
querySelector는 특정 요소의 id가 아닌, css 선택자로 요소 노드를 반환하는 API로, getElementById와 같이 단 하나의 요소만을 반환하는 API다. querySelector는 다음과 같이 작성할 수 있다.
let $animalInfo = document.querySelector('div.animal-info');
let $age = document.querySelector('div#age');
console.log($animalInfo);
console.log($age);
코드를 실행하면 class 이름이 animalInfo인 요소와 id 값이 age인 요소가 출력된다.
지금까지 살펴본 두 가지의 API는 전부 단 하나의 요소만을 반환하지만, 조건을 만족하는 여러 개의 요소들을 출력하는 DOM API도 존재한다. 간단하게 두 가지만 살펴보자.
document.querySelectorAll()
querySelectorAll은 전달받은 class의 이름을 갖고 있는 여러 요소들을 전부 찾아 반환하는 DOM API로, 이 DOM API의 반환값을 확인해 보기 위해 index.html로 돌아가서 class 이름이 animal-info인 div 요소 내부에 있는 모든 요소들에 class 이름을 info-item으로 설정해 보자.
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="animal-info">
<div class="info-item" id="name">강아지</div>
<div class="info-item" id="color">갈색</div>
<div class="info-item" id="age">2살</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
그리고 querySelectorAll을 사용해서 class 이름이 info-item인 모든 요소들을 가져와보자.
let $infoItem = document.querySelectorAll('div.info-item');
console.log($infoItem);
이번엔 요소가 1개만 출력되지 않고 여러 개의 요소가 출력된다.
document.getElementsByClassName()
마찬가지로, 여러 개의 요소들을 출력하는 또 다른 DOM API에 대해 살펴보자. getElementsByClassName은 css 선택자가 아닌 class 이름만으로 여러 요소들을 찾는 DOM API다. 동일하게 class 이름이 info-item인 div 요소를 가져와보자.
let $infoItem = document.getElementsByClassName('info-item');
console.log($infoItem);
코드를 출력 출력 결과 class 이름이 info-item인 세 개의 요소들이 전부 출력된다. 이 외에도 DOM API에는 더 다양한 API들이 존재한다. class 이름을 설정 및 변경할 수 있는 DOM API, 텍스트를 추가하고 수정할 수 있고, 스타일을 수정할 수 있는 DOM API도 있다.
더 다양한 API에 대해 살펴보고 싶다면, 자바스크립트 핸드북을 참고하면 좋다.
이 내용은 인프런 '웹 프론트엔드를 위한 자바스크립트 첫걸음' 강의 내용 중 일부로, 강의 수강을 원하시는 분들은 아래의 쿠폰을 통해 할인 가격으로 구매할 수 있습니다.
강의 링크 : https://inf.run/7AC37
쿠폰 번호 : 17911-51dfaf428610
기간 : 24년 12월 31일까지
'javascript' 카테고리의 다른 글
| Express.js로 간단한 서버 만들기 (2) | 2024.11.03 |
|---|---|
| innerHTML은 안전한가? (1) | 2024.10.13 |
| HTML, CSS, Javascript로 크롬 시작화면 개발하기 (2) | 2024.09.24 |
| 화살표 모양 함수는 뭐가 다를까? (2) | 2024.09.11 |
| 클로저는 도대체 뭘까? (0) | 2024.08.29 |
