DOM 튜토리얼을 변경하는 방법

11194 단어 beginnerswebdevjavascripttutorial
이 기사에서는 DOM에서 노드를 추가, 변경, 교체 및 제거하는 방법에 대해 모두 알아봅니다. 특히 createElement() 및 createTextNode() 메서드를 살펴보겠습니다.

새 노드 생성



다음 HTML 파일을 만들어 봅시다.

<html lang="en">
<head>
    <title>Master the DOM!</title>
  </head>
<body>
    <h1>Master the DOM!</h1>
  </body>
</html>


개발자 도구에서 콘솔 탭을 엽니다.
createElement() 객체에 document 메서드를 사용하여 새 p 요소를 생성해 보겠습니다.

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

console.log(paragraph);     // <p></p>


성공! paragraph 변수는 p 요소를 제공합니다.

이제 textContent 속성을 사용하여 요소에 텍스트를 추가할 수 있습니다.

paragraph.textContent = "I'm a paragraph!";

console.log(paragraph);     // <p>I'm a paragraph!</p>

createElement()와 textContent를 결합하여 완전한 요소 노드를 만들 수 있습니다.
innerHTML 속성을 사용하여 요소에 콘텐츠를 추가할 수도 있습니다. 이 속성을 사용하여 요소에 텍스트와 HTML을 모두 추가할 수 있습니다.

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


두 가지 방법 중 textContent가 우수합니다. innerHTML보다 렌더링 속도가 약간 더 빠릅니다.
createTextNode() 메소드를 사용하여 텍스트 노드를 생성하는 것도 가능합니다:

const text = document.createTextNode("I'm a text node!");

console.log(text);    // "I'm a text node!"


이 모든 방법은 새로운 요소와 텍스트 노드를 만들었지만 문서에 삽입될 때까지 웹사이트의 프런트 엔드에 표시되지 않습니다!

DOM에 노드 삽입



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

HTML에 목록을 추가하여 이를 시연해 보겠습니다.

<ul>
  <li>Get Chicken</li>
  <li>Get Salmon</li>
  <li>Get Steak</li>
</ul>


목록의 끝에 새 항목을 추가하고 싶다고 가정해 보겠습니다. 이전에 했던 것처럼 먼저 요소를 만들고 텍스트를 추가해야 합니다.

// Get the ul element
const list = document.querySelector('ul');

// Create new list item
const newItem = document.createElement('li');
newItem.textContent = 'Get Shrimp';


이제 새 목록 항목에 대한 완전한 요소가 있습니다! 따라서 appendChild()를 사용하여 목록 끝에 추가할 수 있습니다.

// Add our new item to the end of the list
list.appendChild(newItem);


그리고 새로운 li 요소가 ul 끝에 추가되었습니다.

목록의 시작 부분에 항목을 추가하려면 다른 요소를 생성해 보겠습니다.

// Create a new list item
const anotherNewItem = document.createElement('li');
anotherNewItem.textContent = 'Get Taco Shells';

createElement() 메서드를 사용하여 목록의 시작 부분에 추가합니다. 첫 번째는 추가할 새 자식 노드이고 두 번째는 바로 뒤에 오는 형제 노드입니다.

parentNode.insertBefore(newNode, nextSibling);


예를 들어 다음과 같이 새insertBefore() 요소를 목록의 시작 부분에 추가합니다.

// Add a new item to the beginning of the list
list.insertBefore(anotherNewItem, list.firstElementChild);


이제 새 노드가 목록의 시작 부분에 추가되었습니다!
anotherNewItem 를 사용하여 기존 노드를 새 노드로 교체하는 방법도 살펴보겠습니다. 먼저 새 요소를 만듭니다.

const modifiedItem = document.createElement('li');
modifiedItem.textContent = "Get Sauces";

replaceChild()도 두 개의 인수를 받습니다. 첫 번째는 새 노드이고 그 다음은 교체할 노드입니다.

parentNode.replaceChild(newNode, oldNode);


이 예에서는 목록의 세 번째 요소 하위를 대체합니다.

// Replace list item
list.replaceChild(modifiedItem, list.children[3])

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

DOM에서 노드 제거



DOM에서 노드를 제거하려면 replaceChild()를 사용하여 부모에서 자식 노드를 제거하거나 removeChild()를 사용하여 노드 자체를 제거할 수 있습니다.

예제로 돌아가서 목록의 마지막 항목을 제거해 보겠습니다.

// Remove the last list item
list.removeChild(list.lastElementChild);


또는 remove() 를 사용하여 노드 자체를 제거할 수 있습니다.

// Remove the third element from our list
list.children[2].remove();

remove() 및 removeChild() 를 사용하여 DOM에서 노드를 제거할 수 있습니다.

다음 자습서에서는 HTML 요소 노드를 수정하여 DOM에서 클래스 및 스타일을 수정하는 방법을 살펴보겠습니다.

결론



이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자


  • Portfolio
  • Hashnode
  • Medium
  • Github
  • Codepen
    • Vuex의 템플릿 리터럴 유형
    Aventuras con NestJS: API를 구성합니다. 파트 1

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage