DOM을 변경하는 방법
페이지 정보
작성자 운영자 작성일 19-06-14 18:39 조회 1,168 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
앞 장에서 배운 지식을 사용하여 개발자는 클래스, 태그, ID 및 선택기를 사용하여 DOM에서 노드를 찾고 부모, 자식 및 형제 속성을 사용하여 상대 노드를 찾을 수 있습니다.
DOM을 이해하는 다음 단계는 노드를 추가, 변경, 대체 및 제거하는 방법을 학습하는 것입니다. 할 일 목록 응용 프로그램은 DOM에서 요소를 작성, 수정 및 제거 할 수 있어야 하는 JavaScript 프로그램의 한 가지 실용적인 예입니다.
이 장에서는 새로운 노드를 작성하여 DOM에 삽입하고, 기존 노드를 대체하고, 노드를 제거하는 방법을 학습합니다.
새 노드 만들기
정적 웹 사이트에서 요소는 HTML을 .html 파일에 직접 작성하여 페이지에 추가됩니다. 동적 웹 응용 프로그램에서 요소 및 텍스트는 종종 JavaScript로 추가됩니다. createElement() 및 createTextNode() 메소드는 DOM에 새 노드를 만드는 데 사용됩니다.
Property/Method |
Description |
createElement() |
새 요소 노드 만들기 |
createTextNode() |
새 텍스트 노드 만들기 |
node.textContent |
요소 노드의 텍스트 내용 가져 오기 또는 설정 |
node.innerHTML |
HTML 내용 또는 요소 가져 오기 또는 설정 |
새로운 기본 index.html 파일을 열어서 작업하십시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM 학습</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>
우리는 문서 객체에 createElement()를 사용하여 새로운 p 요소를 생성 할 것이다.
const paragraph = document.createElement('p')
우리는 콘솔에서 테스트 할 수 있는 새로운 p 요소를 만들었습니다.
console.log(paragraph);
단락 변수는 빈 p 요소를 출력합니다. 이 요소는 텍스트가 없으면 별로 유용하지 않습니다. 요소에 텍스트를 추가하기 위해 textContent 속성을 설정합니다.
paragraph.textContent = "새 단락 추가."
console.log(paragraph);
createElement()와 textContent의 결합은 완전한 요소 노드를 생성합니다.
요소의 내용을 설정하는 또 다른 방법은 innerHTML 속성을 사용하는 것입니다. 이 속성을 사용하면 HTML뿐만 아니라 텍스트를 요소에 추가 할 수 있습니다.
paragraph.innerHTML = "새 단락은 <strong>진하게</strong> 표현합니다."
이것이 작동하고 요소에 내용을 추가하는 일반적인 방법인데, 인라인 JavaScript를 요소에 추가 할 수 있으므로 innerHTML 메서드 사용과 관련된 XSS (Cross-Site Scripting) 위험이 있습니다. 따라서 대신 HTML 태그를 제거하는 textContent를 사용하는 것이 좋습니다.
createTextNode() 메소드를 사용하여 텍스트 노드를 작성할 수도 있습니다.
const text = document.createTextNode("I'm a new text node.")
console.log(text);
이러한 메소드를 사용하여 새로운 요소와 텍스트 노드를 만들었지만 문서에 삽입되기 전까지 웹 사이트의 프런트엔드에는 표시되지 않습니다.
DOM에 노드 삽입하기
프런트 엔드에서 만드는 새로운 텍스트 노드와 요소를 보려면 문서에 삽입해야 합니다. appendChild() 및 insertBefore()는 부모 요소의 처음, 중간 또는 끝에 항목을 추가하는 데 사용되며 replaceChild()는 이전 노드를 새 노드로 바꾸는 데 사용됩니다.
Property/Method |
Description |
node.appendChild() |
부모 요소의 마지막 자식으로 노드 추가 |
node.insertBefore() |
지정된 형제 노드 이전에 부모 요소에 노드 삽입 |
node.replaceChild() |
기존 노드를 새 노드로 바꾸기 |
HTML로 간단한 작업 목록을 작성해 보겠습니다.
<ul>
<li>청소하기</li>
<li>산책하기</li>
<li>영화보기</li>
</ul>
브라우저에서 페이지를 로드 하면 다음과 같이 표시됩니다.
할 일 목록 끝에 새 항목을 추가하려면 "새 노드 만들기"에서 배웠던 것처럼 먼저 요소를 만들어서 텍스트를 추가해야 합니다.
// 할 일 목록 ul 요소
const todoList = document.querySelector('ul')
// 새로운 할 일 목록 만들기
const newTodo = document.createElement('li')
newTodo.textContent = '친구 만나기'
새로운 ToDo를 위한 요소가 완성되었으므로 appendChild()를 사용하여 목록 끝에 추가 할 수 있습니다.
// 목록 끝에 새로운 todo를 추가
todoList.appendChild(newTodo)
어쩌면 우선 순위가 높아질 수 있으며, 목록의 처음에 추가하려고 합니다. createElement()는 하나의 요소만 만들고 재사용 할 수 없으므로 다른 요소를 만들어야 합니다.
// 새로운 할 일 목록 만들기
const anotherTodo = document.createElement('li')
anotherTodo.textContent = '계획 세우기'
insertBefore()를 사용하여 목록의 처음에 추가 할 수 있습니다. 이 메서드는 두 개의 인수를 사용합니다. 첫 번째는 추가 할 새 자식 노드이고 두 번째 노드는 새 노드 바로 다음에 오는 형제 노드입니다. 즉, 다음 형제 노드 앞에 새 노드를 삽입하는 것입니다.
parentNode.insertBefore(newNode, nextSibling)
해야 할 일 목록 예제의 경우, 목록의 첫 번째 요소 하위 항목 인 새 anotherTodo 요소를 추가합니다 (현재 청소하기 목록 항목임).
// 목록의 시작 부분에 할 일을 새로 추가.
todoList.insertBefore(anotherTodo, todoList.firstElementChild)
새 노드가 목록의 시작 부분에 성공적으로 추가되었습니다. 이제 부모 요소에 노드를 추가하는 방법을 알았습니다.
다음으로 우리가 할 수 있는 일은 기존 노드를 새로운 노드로 교체하는 것입니다.
노드를 교체하는 방법을 보여주기 위해 기존해야 할 일을 수정합니다. 새 요소를 만드는 첫 번째 단계는 동일하게 유지됩니다.
const modifiedTodo = document.createElement('li')
modifiedTodo.textContent = '영화보기'
insertBefore()와 마찬가지로 replaceChild()는 두 개의 인수, 즉 새 노드와 교체 할 노드를 사용합니다.
parentNode.replaceChild(newNode, oldNode)
목록의 세 번째 요소 하위 요소를 수정 된 할 일로 바꿉니다.
// 기존 할 일을 수정 된 할 일로 교체.
todoList.replaceChild(modifiedTodo, todoList.children[2])
appendChild(), insertBefore() 및 replaceChild()의 조합을 사용하면 DOM의 어느 위치에나 노드와 요소를 삽입 할 수 있습니다.
DOM에서 노드 제거하기
지금까지 요소를 작성하고 DOM에 추가하고 기존 요소를 수정하는 방법을 알았습니다. 마지막 단계는 기존 노드를 DOM에서 제거하는 방법을 배우는 것입니다. 자식 노드는 removeChild()를 사용하여 부모 노드에서 제거 할 수 있으며 노드 자체는 remove()를 사용하여 제거 할 수 있습니다.
Method |
Description |
node.removeChild() |
자식 노드 제거 |
node.remove() |
노드 제거 |
위의 to-do 예제를 사용하면 항목을 완성한 후에 삭제할 수 있습니다.
친구 만나기를 마친 경우 removeChild()를 사용하여 목록의 마지막 하위 항목 인 친구 만나기 항목을 제거 할 수 있습니다.
todoList.removeChild(todoList.lastElementChild)
노드에서 remove() 메서드를 직접 사용하여 노드 자체를 제거하는 것이 더 간단한 방법 일 수 있습니다.
// todoList에서 두 번째 요소 자식을 제거
todoList.children[1].remove()
removeChild()와 remove() 사이에서 DOM에서 노드를 제거 할 수 있습니다. DOM에서 하위 요소를 제거하는 방법 중 하나는 부모 요소의 innerHTML 속성을 빈 문자열 ( "")로 설정하는 것입니다. 이것은 선호되는 방법이 아니지만 보게 될 수도 있습니다.
이 장에서 자바 스크립트를 사용하여 새로운 노드와 요소를 생성하고 이를 DOM에 삽입하고 기존 노드와 요소를 대체하고 제거하는 방법을 배웠습니다.
댓글목록 0
등록된 댓글이 없습니다.
