26. DOM을 이용하여 HTML Elements를 조작해보기

안녕하세요. 박기린입니다.

저번 글에서 DOM에 대해 설명을 드렸습니다. (DOM 설명글: https://arnopark.tistory.com/504)

이번에는 DOM을 JS를 이용해서 접근하는 방법에 대해 알아보겠습니다.

---

 

 

 

HTML Elements를 선택하고 조작하기

직관적인 설명을 드리기 위해 제 블로그 사이트를 이용해보겠습니다.

구글 크롬의 개발자모드(F12)에 들어가면 이런 창이 뜹니다.

 

 

 

 

 

PC화면 기준으로, 글의 제목 바로 위를 보면 '글의 카테고리'가 적혀있습니다.

class는 category로 되어있습니다.

 

 

 

 

실제 HTML 파일에서 발췌

크롬 개발자 모드의 console에서 발췌

JS로 DOM (HTML Elemnts)에 접근하기 위해선 'document' object(객체)를 사용해야 합니다.

document객체는 따로 JS 모듈을 설치할 필요가 없습니다. 그런데 JS에 기본 내장된 객체도 아닙니다. DOM 설명글에서 말씀드렸던 'WEB APIs'에 내장된 객체입니다. 그래서 chrome 개발자모드의 console 창에서도 document 객체를 불러올 수 있습니다.

 

document 객체의 querySelector() 메소드를 불러옵니다.

querySelector()메소드 인자로 class 명을 String 타입으로 전달해주면, 해당하는 class의 DOM에 접근할 수 있습니다.

위의 사진을 보시면, html element를 통째로 가져오는 것을 확인할 수 있습니다.

 

 

 

이중에서 <>태그 안에 있는 글자</>를 가져오고 싶다면, 'textContent' property를 불러오면 됩니다.

 

 

 

 

 

그리고 할당 연산자 '=' 를 이용해서 쉽게 DOM의 내용을 수정할 수 있습니다.

 

 

 

 

 

 

정말 글의 카테고리가 'JS/강의노트'에서 '안녕하세요'로 변경된 것을 확인할 수 있습니다.

---

 

 

 

 

 

HTML Elments의 Attributes 접근하기

임의로 menu라는 class 명을 가진 button element에 233 value를 부여했습니다.

'.attributeName' property를 이용해서, 원하는 attribute의 값을 읽고 수정할 수 있습니다.

위의 사진을 보시면 'value' attribute에 접근하기 위해, querySelector()메소드 다음에 '.value'를 추가해서 접근했습니다.

 

 

 

 

class 접근의 경우

class의 경우 '.class' 대신에 '.classList'를 쓰시면 됩니다.

HTML elements는 여러 개의 class를 가질 수 있습니다. 그 class들을 .classList property의 DOMTokenList에 담아서 전달해줍니다.

 

 

 

DOM 조작을 통해 class 변경도 가능합니다.

 

 

 

예시 코드

console.log(document.querySelector('.message').textContent);
document.querySelector('.message').textContent = '🎉 Correct Number';

document.querySelector('.number').textContent = 13;
document.querySelector('.score').textContent = 10;

document.querySelector('.guess').value = 23;
console.log(document.querySelector('.guess').value);