[JS] | API , DOM, 요소 접근

💡 DOM(Document Object Model) 정리

웹 개발에서 반드시 알아야 할 핵심 개념 중 하나인 DOM에 대해 간단하고 실질적인 관점으로 정리해봤습니다.

---

📌 DOM이란?

• **DOM(Document Object Model)**은 웹 브라우저가 HTML 문서를 읽고 객체 구조로 변환한 것.
• 이 구조를 통해 JavaScript로 HTML 요소를 조작할 수 있게 됨.
• 쉽게 말하면, HTML = 정적 문서 → DOM = 살아있는 문서(조작 가능)

---

🧩 DOM 조작의 주요 단계

DOM을 다루는 핵심은 접근 → 변경 or 조작 이다!

---

1. 요소 접근하기

1️⃣ getElementById - 아이디로 접근

특정 id를 가진 하나의 요소에 접근가능

function test1(){

    const elementX1 = document.getElementById("x1");

    elementX1.innerText = "야호!";

}

<li id="x1">안녕하세요</li>

 

2. 클래스 접근하기

2️⃣ getElementsByClassName - 클래스로 접근 (HTMLCollection)

동일한 클래스를 가진 여러 요소에 접근합니다. 반복문으로 하나씩 처리할 수 있음.

function test2(){

    const c1ElementList = document.getElementsByClassName("c1");

    for(element of c1ElementList){

        element.innerText = "!반가워";

    }

}

 

3️⃣ 특정 요소 하위의 클래스 요소만 선택

특정 요소의 하위에서만 .className을 찾아야 할 때 유용함.

function test3(){

    const x1Element = document.getElementById("ul1");

    const c1ElementList = x1Element.getElementsByClassName("c1");

    for(element of c1ElementList){

        element.innerText = "헬로!!!!!!!!!";

    }

}

 

4️⃣ querySelector, querySelectorAll - CSS 선택자 방식

CSS 선택자 방식으로 더 정교하게 요소를 선택할 수 있음.

function test4(){

    const c1Element = document.querySelector("#ul1 .c1"); // 첫 번째만

    const c1ElementList = document.querySelectorAll("#ul1 .c1"); // 모두 선택

}

 

querySelector, querySelectorAll은 CSS 선택자 형태의 문자열만 파라미터로 받는 함수

✅ querySelector(selector)

• CSS 선택자 문법을 사용하는 함수
• 조건에 맞는 첫 번째 요소만 리턴
• 즉, 배열을 받는 게 아니라 문자열을 받음 (예: ".c1", "#x1", "ul > li" 등)
• 항상 하나의 요소 또는 null만 반환

✅ querySelectorAll(selector)

• 이것도 CSS 선택자를 쓰지만,
• 조건에 맞는 모든 요소를 NodeList 형태로 반환
• 반복문 돌릴 수 있어 (for...of, forEach 등 사용 가능)

5️⃣ children - 자식 요소 접근

특정 요소의 자식들만 순회할 수 있음

function test5(){

    const ulElement = document.getElementById("ul1");

    for(element of ulElement.children){

        element.innerText = "하하하ㅏ";

    }

}

 

6️⃣ parentElement - 부모 요소 접근

지정된 요소의 부모 노드에 접근할 수 있음.

function test6(){

    const x1Element = document.getElementById("x1");

    x1Element.parentElement.style.backgroundColor = "lightpink";

}

 

7️⃣ closest() - 가장 가까운 조상 요소 선택

자기 자신부터 시작해서 가장 가까운 조상 중에서 지정한 선택자를 찾음.

function test7(){

    const x2Element = document.getElementById("x2");

    const c1Element = x2Element.closest(".c1");

    c1Element.style.backgroundColor = "skyblue";

}

---

 

자바스크립트가 HTML 요소를 작동시키고 조작하려면, DOM은 필수적인 요소
웹 페이지에서 HTML의 구조를 자바스크립트로 제어하려면, 브라우저가 그 HTML을 DOM 객체로 변환한 뒤 그 객체를 다루는 방식으로 작업을 해야 함.

💡 DOM을 이해하는 핵심 포인트

1. HTML은 정적인 마크업일 뿐
   • 예를 들어, <div>나 <button> 같은 HTML 태그들은 그 자체로 정적이지, 동적으로 어떤 동작을 하게 만들지는 못해.
2. DOM은 HTML을 객체로 변환한 모델
   • 브라우저가 HTML을 읽어서 그 내용을 DOM 트리(객체 형태)로 바꿔놓음. 그 DOM 트리는 자바스크립트에서 제어할 수 있음
   • 자바스크립트는 DOM을 통해 HTML 요소를 동적으로 수정
     • 예를 들어, 버튼 클릭 시 텍스트가 바뀌거나, 새로운 콘텐츠를 추가하거나, 스타일을 바꾸는 등의 작업은 자바스크립트가 DOM을 통해 HTML을 조작하기 때문에 가능하다

---

🧩 DOM 없이는 자바스크립트로 HTML을 조작할 수 없어!

자바스크립트가 HTML을 "작동"하게 만든다는 건, HTML 문서의 구조와 내용을 동적으로 바꾸고 제어하는 걸 의미하는데, 그게 가능하려면 DOM이 있어야만 함. DOM을 통해 HTML의 요소를 찾아내고, 그 요소를 조작할 수 있기 때문임.

 

 

 

 

JQuery 사용법

 

https://jquery.com/

jQuery

google CDN 들어가서

첫번째 줄 복사한다음에 head에다 넣기!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>