DOM을 변경하는 방법

소개

DOM을 탐색하는 방법의 이전 두 편에서. 이 지식을 사용하여 개발자는 클래스, 태그, ID 및 선택기를 사용하여 DOM에서 노드를 찾고 부모, 자식 및 형제 속성을 사용하여 상대 노드를 찾을 수 있습니다.

DOM에 더욱 능숙해지기 위한 다음 단계는 노드를 추가, 변경, 교체 및 제거하는 방법을 배우는 것입니다. 할 일 목록 애플리케이션은 DOM에서 요소를 생성, 수정 및 제거할 수 있어야 하는 JavaScript 프로그램의 실용적인 예입니다.

이 자습서에서는 새 노드를 만들어 DOM에 삽입하고 기존 노드를 교체하고 노드를 제거하는 방법을 살펴보겠습니다.

새 노드 생성

정적 웹 사이트에서는 .html 파일에 HTML을 직접 작성하여 페이지에 요소를 추가합니다. 동적 웹 앱에서 요소와 텍스트는 종종 JavaScript로 추가됩니다. createElement() 및 createTextNode() 메서드는 DOM에서 새 노드를 만드는 데 사용됩니다.

Property/Method	Description
`createElement()`	Create a new element node
`createTextNode()`	Create a new text node
`node.textContent`	Get or set the text content of an element node
`node.innerHTML`	Get or set the HTML content of an element

시작하려면 index.html 파일을 만들고 새 프로젝트 디렉토리에 저장하겠습니다.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "검사\를 선택하여 개발자 도구를 연 다음 콘솔로 이동합니다.

document 객체에서 createElement()를 사용하여 새 p 요소를 생성합니다.

const paragraph = document.createElement('p');

Console에서 테스트할 수 있는 새로운 p 요소를 만들었습니다.

console.log(paragraph)

Output<p></p>

paragraph 변수는 빈 p 요소를 출력하는데, 이는 텍스트 없이는 그다지 유용하지 않습니다. 요소에 텍스트를 추가하기 위해 textContent 속성을 설정합니다.

paragraph.textContent = "I'm a brand new paragraph.";
console.log(paragraph)

Output<p>I'm a brand new paragraph.</p>

createElement()와 textContent의 조합은 완전한 요소 노드를 생성합니다.

요소의 콘텐츠를 설정하는 다른 방법은 innerHTML 속성을 사용하는 것입니다. 이 속성을 사용하면 요소에 HTML과 텍스트를 추가할 수 있습니다.

paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";

메모:

createTextNode() 메서드로 텍스트 노드를 생성하는 것도 가능합니다.

const text = document.createTextNode("I'm a new text node.");
console.log(text)

Output"I'm a new text node."

이러한 방법을 사용하여 새 요소와 텍스트 노드를 만들었지만 문서에 삽입될 때까지 웹 사이트의 프런트 엔드에 표시되지 않습니다.

DOM에 노드 삽입

프런트 엔드에서 생성한 새 텍스트 노드와 요소를 보려면 문서에 삽입해야 합니다. 메서드 appendChild() 및 insertBefore()는 부모 요소의 시작, 중간 또는 끝에 항목을 추가하고 replaceChild()에 항목을 추가하는 데 사용됩니다.는 이전 노드를 새 노드로 교체하는 데 사용됩니다.

Property/Method	Description
`node.appendChild()`	Add a node as the last child of a parent element
`node.insertBefore()`	Insert a node into the parent element before a specified sibling node
`node.replaceChild()`	Replace an existing node with a new node

이러한 방법을 연습하기 위해 HTML로 할 일 목록을 만들어 보겠습니다.

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
</ul>

브라우저에서 페이지를 로드하면 다음과 같이 표시됩니다.

할 일 목록 끝에 새 항목을 추가하려면 위의 "새 노드 만들기\ 섹션에서 했던 것처럼 먼저 요소를 만들고 여기에 텍스트를 추가해야 합니다.

// To-do list ul element
const todoList = document.querySelector('ul');

// Create new to-do
const newTodo = document.createElement('li');
newTodo.textContent = 'Do homework';

이제 새 할일에 대한 완전한 요소가 있으므로 appendChild()를 사용하여 목록 끝에 추가할 수 있습니다.

// Add new todo to the end of the list
todoList.appendChild(newTodo);

새로운 li 요소가 ul 끝에 추가된 것을 볼 수 있습니다.

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

우선 순위가 더 높은 작업이 있고 목록의 시작 부분에 추가하고 싶을 수 있습니다. createElement()는 하나의 요소만 생성하고 재사용할 수 없으므로 다른 요소를 만들어야 합니다.

// Create new to-do
const anotherTodo = document.createElement('li');
anotherTodo.textContent = 'Pay bills';

insertBefore()를 사용하여 목록의 시작 부분에 추가할 수 있습니다. 이 메서드는 두 개의 인수를 사용합니다. 첫 번째는 추가할 새 자식 노드이고 두 번째는 새 노드 바로 뒤에 오는 형제 노드입니다. 즉, 다음 형제 노드 앞에 새 노드를 삽입하는 것입니다. 이는 다음 의사 코드와 유사합니다.

parentNode.insertBefore(newNode, nextSibling);

할 일 목록 예제의 경우 현재 식료품 구입 목록 항목인 목록의 첫 번째 요소 자식 앞에 새 anotherTodo 요소를 추가합니다.

// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild);

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

새 노드가 목록의 시작 부분에 성공적으로 추가되었습니다. 이제 부모 요소에 노드를 추가하는 방법을 알았습니다. 다음으로 할 수 있는 작업은 기존 노드를 새 노드로 교체하는 것입니다.

노드를 교체하는 방법을 보여주기 위해 기존 할 일을 수정합니다. 새 요소를 만드는 첫 번째 단계는 동일하게 유지됩니다.

const modifiedTodo = document.createElement('li');
modifiedTodo.textContent = 'Feed the dog';

insertBefore()와 마찬가지로 replaceChild()는 아래 의사 코드에 표시된 것처럼 새 노드와 교체할 노드라는 두 개의 인수를 사용합니다.

parentNode.replaceChild(newNode, oldNode);

목록의 세 번째 요소 하위를 수정된 to-do로 대체합니다.

// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2]);

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

appendChild(), insertBefore() 및 replaceChild()의 조합을 사용하여 DOM의 모든 위치에 노드와 요소를 삽입할 수 있습니다.

DOM에서 노드 제거

이제 우리는 요소를 생성하고 DOM에 추가하고 기존 요소를 수정하는 방법을 알고 있습니다. 마지막 단계는 DOM에서 기존 노드를 제거하는 방법을 배우는 것입니다. 자식 노드는 removeChild()를 사용하여 부모에서 제거할 수 있으며 노드 자체는 remove()를 사용하여 제거할 수 있습니다.

Method	Description
`node.removeChild()`	Remove child node
`node.remove()`	Remove node

위의 할 일 예를 사용하여 완료된 항목을 삭제하려고 합니다. 숙제를 완료했다면 removeChild()를 사용하여 목록의 마지막 자식인 Do homework 항목을 제거할 수 있습니다.

todoList.removeChild(todoList.lastElementChild);

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

또 다른 방법은 노드에서 직접 remove() 메서드를 사용하여 노드 자체를 제거하는 것입니다.

// Remove second element child from todoList
todoList.children[1].remove();

<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

removeChild()와 remove() 사이에서 DOM에서 모든 노드를 제거할 수 있습니다. DOM에서 자식 요소를 제거하는 또 다른 방법은 부모 요소의 innerHTML 속성을 빈 문자열(\\)로 설정하는 것입니다. 덜 명시적이므로 선호하는 방법은 아니지만 기존 코드에서 볼 수 있습니다.

결론

이 자습서에서는 JavaScript를 사용하여 새 노드와 요소를 만들고 DOM에 삽입하고 기존 노드와 요소를 교체 및 제거하는 방법을 배웠습니다.

DOM 이해 시리즈의 이 시점에서 DOM의 요소에 액세스하고, DOM의 노드를 살펴보고, DOM 자체를 수정하는 방법을 알게 되었습니다. 이제 JavaScript를 사용하여 기본 프런트 엔드 웹 앱을 만드는 데 자신감을 가질 수 있습니다.