DOM에서 노드 추가-삭제하기

📁Web Developing/JavaScript 기초

DOM에서 노드 추가-삭제하기

Hush 2022. 6. 25. 21:59

노드 리스트란

DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 한다.

노드 리스트란 무엇일까?

DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다.

이때 노드 정보를 여러 개 저장한 것이 노드 리스트이다.

배열과 비슷하게 동작한다.

텍스트 노드를 사용하는 새로운 요소 추가하기

여기에서는 [더 보기] 링킁를 클릭하면 그 아래에 간단한 텍스트가 표시되는 스크립트 소스를 작성해 보겠다.

문서에는 단순히 <p> 태그 하나가 추가되어 보이지만 DOM에서는 여러 단계가 필요하다는 것을 알 수 있다.

1. 요소 만들기 - createElement() 메서드

DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것이다.

이때 사용하는 메서드는 createElement()인데 괄호 안에 해당하는 요소 노드를 만들면 된다.

document.reateElement(노드명)

예를 들어 새로운 p 요소를 만든다면 다음과 같이 작성한다.

var newP = document.createElement("p");

하지만 createElement() 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다.

이제 <p> 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다.

2. 텍스트 노드 만들기 - createTextNode() 메서드

새로운 요소 노드를 만들었다면 그다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다.

텍스트 노드를 만드는 메서드는 createTextNode()이고 다음과 같은 형식으로 사용한다.

document.createTextNode(텍스트);

새롭게 만든 p 요소에 들어갈 내용이 있는 텍스트 노드는 txtNode 변수로 저장한다.

그리고 이것을 DOM 트리에 추가하면 된다.

3. 자식 노드 연결하기- appendChild() 메서드

지금까지 새로운 p 노드(newP)와 사용할 텍스트 노드(txtNode)를 만들었다.

아직까지는 노드를 만든 상태이며 부모 노드와 자식 노드로 연결되지 않았다.

appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다.

이때 appendChild() 메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가된다.

부모노드.appendChild(자식노드)

다음은 텍스트 노드 txtNode를 요소 노드 newP의 자식 노드로 연결하고, newP 노드를 다시 <div di="info"></div>의 자식 노드로 연결한다.

newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);

4. 전체 소스 코드 완성하기

지금까지 요소를 생성하고 서로 연결하는 방법을 알아보았으니 전체 소스를 작성해 보겠다.

다음 에제를 보면 [더 보기] 링크를 클릭하는 부분에 addP() 함수와 this.onclick='' 코드가 추가되었다.

이것은 addP() 함수가 한 번만 실행되도록 하기 위한 것이다.

만일 이 코드를 추가하지 않으면 링크를 클릭할 때마다 p 요소가 계속 추가된다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<div id="container">
		<h1>DOM을 공부합시다</h1>
		<a href="#" onclick="addP(); this.onclick='';">더 보기</a>
		<div id="info"></div>
	</div>

	<script>
		function addP() {
			var newP = document.createElement("p");
			var txtNode = document.createTextNode("DOM은 document object model의 줄임말이다.");
			newP.appendChild(txtNode);
			document.getElementById("info").appendChild(newP);
		}
	</script>
</body>
</html>

속성값이 있는 새로운 요소 추가하기

HTML 태그에서는 여러 가지 속성을 사용해서 웹 요소를 제어한다.

따라서 새로운 요소를 만들면 그와 관련된 속성 노드도 만들어서 자식 노드로 연결해야 한다.

앞으 예제에 이어서 '더 보기' 링크를 클릭하면 그 아래에 텍스트는 물론 이미지까지 표시되는 스크립트 소스를 추가로 작성해 보겠다.

웹 문서에서 새 이미지를 보여 주려면 img 요소 노드를 추가한 후 src 속성 노드를 만들어 자식 노드로 연결해야 한다.

1. 요소 노드 만들기 - createElement() 메서드

텍스트 노드를 추가했던 방법과 마찬가지로 createElement() 메서드를 새용해서 새로운 이미지 노드를 만든다.

var newImg = document.createElement("img")

2. 속성 노드 만들기 - createAttribute() 메서드

img 요소는 src 속성을 사용해서 이미지 파일으 경로를 지정해야 브라우저에 이미지를 보여 줄 수 있다.

그래서 createAttribute() 메서드를 사용해서 속성 노드를 만들어야 한다.

document.createAttribute(속성명)

다음은 이미지 파일의 경로를 지정할 src와 대체 텍스트를 지정할 alt를 위해 속성 노드를 추가하는 예제이다.

속성 노드를 만든 후 속성값은 value 프로퍼티를 사용해서 지정한다.

var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";

3. 속성 노드 연결하기 - setAttributeNode() 메서드

속성 노드는 요소 노드의 자식으로 연결해야 한다.

새로 만든 속성 노드를 요소 노드에 추가하려면 setAttributeNode() 메서드를 사용한다.

요소명.setAttributeNode(속성노드)

만약 추가할 속성이 요소 노드에 이미 들어 있다면 기존 속성 노드를 새 속성 노드로 대체한다.

다음은 newImg라는 새 이미지 요소를 만들고 srcNode라는 속성 노드를 추가하여 작성한 것이다.

다른 속성도 같은 방법으로 얼마든지 추가할 수 있다.

newImg.setAttributeNode(srcNode);

4. 자식 노드 연결하기 - appendChild() 메서드

속성 노드까지 연결했지만 아직 img 요소는 만들어 놓기만 한 상태이다.

img 요소를 화면에 표시하려면 웹 문서의 DOM에 추가해야 한다.

그러려면 appendChild() 메서드를 사용해서 필요한 위치에 자식 노드로 추가하면 된다

다음은 #info 위치에 새로 만든 img 요소를 자식 요소로 추가하는 예제이다.

document.getElementById("info").appendChild(newImg);

+자식 노드 순서를 변경하는 방법

appendChild를 사용하면 새로 자식이 되는 노드가 기존 자식노드 뒤에 붙여져서 노드리스트를 구성하게 된다.

만약 기존 자식노드 뒤가 아닌 다른 순서로 새로운 자식 노드를 등록하고 싶다면

insertBefore 메서드를 사용할 수 있다.

insertBefore 메서드는 노드와 노드를 삽입할 위치를 전달하여 자식으로 만들 수 있다.

예를 들어 첫 번째 노드로 등록시키고 싶다면 다음과 같이 입력하면 된다.

parentNode.appendChild(newNode, parentNode.childNodes[0])

노드 삭제하기

노드를 삭제할 때 기억해 둘 것은 부모 노드에서 자식 노드를 삭제해야 한다는 것이다.

즉, 삭제해야 할 노드가 있다면 반드시 부모 노드 먼저 찾아야 한다.

그래서 노드를 삭제하는 메서드 외에 부모 노드를 찾는 프로퍼티가 필요하다.

parentNode 프로퍼티

DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야 한다.

그러려면 삭제할 노드의 부모 노드를 찾아가는 방법을 알아야 한다.

parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다.

노드.parentNode

removeChild() 메서드

이름에서도 알 수 있듯이 자식 노드를 삭제하는 역할을 한다.

부모 노드만 찾는다면 removeChild()메서드를 사용하는 것은 간단하다.

부모노드.removeChild(자식노드)

예를 들어 li 노드를 삭제하려면 li의 부모 노드에서 삭제해야 하므로 다음과 같이 작성하면 된다.

li.parentNode.removeChild(li)

저작자표시 (새창열림)