📌 DOM 메소드 사용법 완벽 가이드

DOM 메소드는 자바스크립트를 통해 HTML 요소와 상호작용하는 데 사용됩니다. 이 메소드를 활용하면 웹 페이지의 동적 변화를 쉽게 구현할 수 있습니다. 이번 포스트에서는 DOM 메소드와 속성에 대해 알아보고, 실제 사용 예시를 통해 쉽게 이해할 수 있도록 설명합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM  메소드 및 속성성</title>
    
</head>
<body>
    <h1 id="song-title" class="heading text" title="VOS의 2019년 발매곡">
    <span>다시 만날까 봐</span>
    </h1>
    <p class="lyrics">
    인스타로 몰래 보는 너의 하루들 누가 봐도 헤어진 티를 내
    </p>
    <p class="lyrics">
    팔로우 다 끊고서 좋아요는 왜 눌렀니 (ㅋㅋ)
    </p>
    <script>
        console.log(document.querySelectorAll(".lyrics"))
        console.log(
            document.getElementsByClassName("lyrics")
        )
        const title = document.getElementById("song-title")
        console.log(title)

        console.log(title.textContent)
        console.log(title.innerText)
        console.log(title.className)
        console.log(title.style)
        console.log(title.title)
    </script>
</body>
</html>

📋 1. 주요 DOM 메소드

🔹 document.querySelector(x)

  • 역할: CSS 선택자 x를 기반으로 첫 번째 요소를 선택합니다.
  • 예시:
let element = document.querySelector('.myClass');

 

  • 클래스명이 myClass인 첫 번째 요소를 선택합니다.

🔹 document.querySelectorAll(x)

  • 역할: CSS 선택자 x를 기반으로 모든 요소를 선택합니다.
  • 예시:
    • 모든 <p> 태그를 선택합니다.
let elements = document.querySelectorAll('p');

🔹 document.getElementById(x)

  • 역할: id 속성 값 x를 기반으로 요소를 선택합니다.
  • 예시:
    • id="header"인 요소를 선택합니다.
let element = document.getElementById('header');

🔹 document.getElementsByClassName(x)

  • 역할: class 속성 값 x를 기반으로 모든 요소를 선택합니다.
  • 예시:
    • class="myClass"인 모든 요소를 선택합니다.
let elements = document.getElementsByClassName('myClass');

🔹 document.write(x)

  • 역할: 문서에 콘텐츠 x를 추가합니다.
  • 예시:
    • 웹 페이지에 <h1> 태그로 "Welcome to my website"를 추가합니다.
document.write('<h1>Welcome to my website</h1>');

📋 2. DOM 속성 관련 메소드

🔹 element.textContent

  • 역할: 요소가 가진 텍스트 콘텐츠를 반환합니다.
  • 예시:
    • id="header" 요소의 텍스트를 반환합니다.
let content = document.getElementById('header').textContent;

🔹 element.innerHTML

  • 역할: 요소 내에 쓰여진 HTML 코드를 텍스트 형태로 반환합니다.
  • 예시:
    • id="content" 요소 내의 HTML 코드를 반환합니다.
let content = document.getElementById('content').innerHTML;

🔹 element.className

  • 역할: 요소의 class 속성 값을 반환합니다.
  • 예시:
    • id="footer" 요소의 class 값을 반환합니다.
let className = document.getElementById('footer').className;

🔹 element.style

  • 역할: 요소의 style 관련 속성 값을 반환합니다.
  • 예시:
    • id="content" 요소의 배경색 값을 반환합니다.
let backgroundColor = document.getElementById('content').style.backgroundColor;

🔹 element.title

  • 역할: 요소의 title 속성 값을 반환합니다.
  • 예시:
    • id="image" 요소의 title 값을 반환합니다.
let title = document.getElementById('image').title;

🚩 3. 결론

DOM 메소드는 HTML 요소와 상호작용하는 중요한 도구로, 웹 페이지를 동적으로 제어할 수 있습니다. querySelector, getElementById, textContent와 같은 메소드를 활용하여 HTML 요소를 선택하고, 내용을 수정하며, 새로운 콘텐츠를 삽입할 수 있습니다.

이제 DOM 메소드를 사용하여 웹 페이지를 동적으로 변화시키는 방법을 익히셨으니, 다양한 자바스크립트 기능을 웹 개발에 적용해 보세요! 🎨💻

'JavaScript' 카테고리의 다른 글

Chapter 2-16. createElement & appendChild(javascript)  (0) 2025.03.31
Chapter 2-15. 반복문 while(javascript)  (0) 2025.03.31
Chapter 2-14. 반복문 for(javascript)  (0) 2025.03.31
Chapter 2-13. 조건문(javascript)  (0) 2025.03.31
Chapter 2-12. 비교연산(javascript)  (0) 2025.03.31

티스토리툴바