JavaScript에서 DOM 조작 마스터하기: 종합 가이드

JavaScript의 DOM 조작

DOM 조작은 개발자가 웹 페이지의 콘텐츠, 구조 및 스타일을 동적으로 수정할 수 있도록 하는 최신 웹 개발의 기본 측면입니다. DOM(문서 개체 모델)은 웹페이지의 HTML 구조를 트리 형식으로 나타냅니다.

---

1. DOM이란 무엇인가요?

DOM은 JavaScript가 HTML 및 CSS와 상호 작용할 수 있도록 브라우저에서 제공하는 인터페이스입니다. 각 요소, 속성 또는 텍스트가 노드인 노드 트리로 페이지를 나타냅니다.

예:

아래 HTML의 경우:

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

ㄷ. querySelectorAll 사용

일치하는 모든 요소를 ​​NodeList로 선택하세요.

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements
</p>

---

3. DOM 요소 수정

아. 콘텐츠 변경

콘텐츠를 수정하려면 textContent 또는 innerHTML 속성을 사용하세요.

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

베. 속성 변경

setAttribute를 사용하거나 직접 속성 할당을 사용하세요.

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

ㄷ. 스타일 바꾸기

인라인 스타일을 적용하려면 스타일 속성을 수정하세요.

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4. 요소 추가 및 제거

아. 새로운 요소 만들기

createElement 메소드를 사용하세요.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

베. 요소 제거

remove 메소드를 사용하거나 deleteChild를 사용하세요.

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5. 요소에 이벤트 리스너 추가

이벤트 리스너를 사용하여 요소에 상호작용성을 추가할 수 있습니다.

const button = document.createElement("button");
button.textContent = "Click Me";

button.addEventListener("click", function() {
  alert("Button clicked!");
});

document.body.appendChild(button);

---

6. DOM 탐색

상위, 하위, 형제 요소를 탐색합니다.

아. 부모와 자녀

const child = document.querySelector("p");
const parent = child.parentElement;
console.log(parent); // Output: Parent element of <p>

const children = parent.children;
console.log(children); // Output: HTMLCollection of child elements
</p>

베. 형제자매

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7. 성능 최적화

1. 일괄 업데이트에 documentFragment 사용: DOM 업데이트를 그룹화하여 리플로우 및 다시 그리기를 최소화합니다.

   const fragment = document.createDocumentFragment();
   for (let i = 0; i 




직접 DOM 조작 최소화:

요소를 캐시하고 일괄 수정합니다.
가상 DOM 라이브러리 사용:

복잡한 애플리케이션의 경우 React 또는 Vue와 같은 라이브러리를 고려하세요.






  
  
  8. 실제 예: 할 일 목록




<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>








  
  
  9. 요약



DOM 조작을 통해 개발자는 웹페이지를 동적으로 수정할 수 있습니다.
효과적인 조작을 위해 getElementById, querySelector 및 createElement와 같은 메소드를 사용하세요.
더 나은 성능을 위해 직접적인 DOM 조작을 최소화하세요.


DOM 조작을 마스터하는 것은 동적이고 대화형이며 사용자 친화적인 웹 애플리케이션을 만드는 데 필수적입니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!

저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.

제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.