Front-end/Javascript

[JS] DOM 조작하기

집으로 감자 2025. 1. 15. 14:35

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/

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)