문서 객체 모델(DOM) 12 - DOM에서 노드 추가 · 삭제하기 2 : 텍스트 필드에 입력한 값을 화면에 표시하기와 노드 삭제하기

텍스트 입력 실습을 하며 마지막 학습을 이어가 볼 것이다.

---

 

 

 

DO IT 실습 - 텍스트 필드에 입력한 값을 화면에 표시하기

텍스트 피드에 입력한 내용을 화면에 표시하려면 단순히 document.write() 문으로 작성할 수 있다. 하지만 이제는 DOM을 공부했으니, 텍스트 필드에 입력한 내용을 새로운 노드로 만들어서 화면에 표시하는 방법을 연습해 보겠다.

 

1단계 : HTML 파일 확인하기

파일을 열면 텍스트 필드와 추가 버튼이 보인다. 테스트 필드에 값을 여러 번 입력하면 화면에 입력값이 여러 개 나타나도록 수정해 보겠다.

 

 

 

id값을 확인해 보면 subject이다. 이제 텍스트 필드에서 입력받은 id값을 itemList에 표시하겠다.

---

 

 

 

2단계 : 새 로운 요소 만들고 연결하기

새로 만들 요소는 <ul> 태그 사이에 들어갈 li 요소 노드이다. 텍스트 필드에 입력한 값을 가져와 새로운 텍스트 노드를 만들고 li 요소 노드에다가 자식 노드로 추가하면 된다. 

---

 

 

 

3단계 : 추가 버튼 만들기

요소를 만드는 함수를 작성했으므로 버튼을 클릭하면 실행하도록 만들어야 한다. 기존의 <button> 태그를 다음과 같이 수정한다. 이때 retrun false를 추가하는 이유는 버튼의 기본 기능인 submit 역할을 취소하기 위한 것이다.

이 기능을 취소하지 않으면 함수를 실행하지 않고 기본 기능을 먼저 실행하기 때문이다. 기본 기능을 끄고 함수만 실행하라고 알려 주기 위해 작성한다.

 

 

이제 수정한 문서를 저장한 후 웹 브라우저에서 확인해 보자. 텍스트 필드에 값을 입력하고 추가 버튼이나 enter를 누르면 입력한 값이 텍스트 필드 아래에 표시된다. 값을 여러 개 입력해도 모두 나열되어 나타난다.

 

---

 

 

 

 

노드 삭제하기

이번에는 DOM 트리에서 특정 노드를 삭지하는 방법을 알아보겠다. 노드를 삭제할 때 기억해 둘 것은 부모 노드에서 자식 노드를 삭제해야 한다는 것이다. 즉, 삭제할 노드가 있다면 반드시 부모 노드를 먼저 찾아야 한다. 그래서 노드를 삭제하는 메서드 외에 부모 노드를 찾는 프로퍼티가 필요하다.

 

 

parentNode 프로퍼티

DOM 트리의 노드는 바로 삭제할 수 없으므로 부모 노드에 접근해야 한다. 그러려면 삭제할 노드의 부모 노드를 찾아가는 방법을 알아야 한다. parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다.

노드.parentNode

 

 

 

이 요소에 접근하자 이렇게 모든 화면이 선택된다. li의 부모 노드인 ul 노드가 보이므로 현재 노드의 부모 노드를 찾을 수 있다.

---

 

 

 

 

removeChild() 메서드

removeChild() 메서드는 이름에서도 알 수 있듯이 자식 노드를 삭제하는 역할을 한다. 부모 노드만 찾는다면 removeChild() 메서드를 사용하는 것은 간단하다.

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

 

 

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

li 노드 삭제하기

li.parentNode.removeChild(li)

---

 

 

 

 

DO IT 실습 - 입력한 항목을 클릭하여 삭제하기

이번에는 화면에 표시한 내용을 클릭해서 삭제하는 방법을 알아보겠다. removeChild() 메서드를 사용하면 DOM 트리에서 요소를 간단히 삭제할 수 있다.

 

 

1단계 : li 요소 가져오기

항목을 삭제하려면 어떻게 해야 할까? 입력한 텍스트를 가져온 후 거기에서 click 이벤트가 발생할 때 그 항목의 부모 노드를 찾아 li 요소를 삭제하라고 하면 된다.

 

 

 

우선 기존에 작성한 newRegister() 함수의 맨 끝에 다음과 같이 코드 한 줄을 추가한다.

---

 

 

 

2단계 : 항목을 클릭하면 실행할 함수 작성하기

노드 리스트에 있는 요소 전체를 반복하면서 click 이벤트가 발생하면 실행할 함수를 연결한다. 앞에서 입력한 소스 다음에 for 문을 추가한다.

 

 

 

부모 노드가 있을 때만 부모 노드에서 현재 객체를 삭제할 수 있도록 다음과 같은 코드를 추가한다.

 

 

이제 작성한 소스를 저장하고 웹 브라우저에서 확인해 보자. 몇 가지 항목을 입력해서 추가한 뒤 그 항목을 클릭하면 제대로 삭제되었는지 알 수 있다.

 

 

 

 

 

 

클릭을 하자 공부 과목이 삭제되었다.

---

 

 

 

학습을 마치고

이 내용도 어제 공부하려고 했던 내용을 밤늦은 시간에 작성해 보았다. 이제 DOM 트리가 무엇인지 알게 되었고 DOM에 접근하여 요소를 가져오고 수정 및 삭제하는 것도 알게 되었다.

다음은 단원 연습문제를 풀며 이제 자바스크립트 책을 마쳐보려고 한다.