[Javascript] 간단한 메모장을 만들어보자 createTextNode() createElement() appendChild() remove()🧐

 

---

 

 

 

---

1. getElementById() 입력창, 입력창값(value) 가져오기

2. createTextNode() 입력한 내용을 텍스트 노드로 변환하기

3. createElement() HTML 요소 생성하기

4. appendChild() 부모 요소에 생성된 자식 요소 추가하기

5. addEventListener() 클릭 이벤트 함수 (추가 / 삭제)

6. remove() HTML 요소 제거하기

 

 

간단한 메모장을 만들기 위해 입력 영역, 추가 영역, 리스트 영역을 간단한 HTML 코드로 작성하고

자바스크립트(Javascript) 로 추가, 삭제 기능을 구현하였다.

 

1. HTML 코드 작성

(위 사진은 CSS 따로 적용)

    <h1>자바스크립트 메모장 추가/삭제</h1>
    <!-- 입력 영역 -->
    <textarea id="inputMemo" placeholder="메모를 입력하세요..."></textarea>
    <!-- 메모 추가 버튼 -->
    <button id="saveMemo">메모 추가</button>
    <!-- 메모 리스트 영역역 -->
    <ul id="memoList"></ul>

 

2. Javascript 함수 정의

- HTML <textarea></textarea> 태그의 입력 값을 가져오기 위해 getElementById() , createTextNode() 메서드를 사용

createElement() 메서드로 <li></li> 요소 생성 후 appendChild() 메서드로 입력값(inputValue) 요소 추가

💡직접 부모와 자손의 관계를 그려보는 것이 이해에 도움이 되었다.

 

- 메모리스트 추가 시 삭제 버튼 또한 아래와 같은 동일한 방법으로 정의

        function workingMemo() {
            const inputMemo = document.getElementById("inputMemo");
            const inputValue = document.createTextNode(inputMemo.value);
            const newMemo = document.createElement("li");
            newMemo.appendChild(inputValue);
            .
            ...생략
            .
            inputMemo.value = "";
        }

출처 : https://www.books.weniv.co.kr/

🤓 다른 방법도 존재한다.

( 개인적으로 위의 코드가 더 간결하고 깔끔한 느낌이 있었다.)

    function ...(){
      const memoInput = document.getElementById('memoInput'); 
      const memoText = memoInput.value;
      const memoList = document.getElementById('memoList'); 
      const memoDiv = document.createElement('div'); 
      memoDiv.classList.add('memo'); 
      memoDiv.innerHTML = `
        <span>${memoText}</span>
        <button class="deleteBtn" onclick="deleteMemo(this)">삭제</button>
      `;
      memoList.appendChild(memoDiv); 
      memoInput.value = ''; 
    }

 

위의 코드는 innerHTML 속성을 사용하여 생성한 <div></div> 태그의 내부에 HTML 코드를 설정한다. 백틱(``) 리터럴을 사용해

변수를 사용할 수 있어 쉽게 작성이 가능하다.

 

classList.add() 는 HTML 요소에 클래스를 추가할 때 사용된다.

classList.add('memo') -> <div class="memo"></div>

 

3. 이벤트 처리 함수 addEventListener() 정의

element.addEventListener(event, callback, useCapture);
1. element: 이벤트를 등록할 DOM 요소.
2. event: 이벤트의 종류를 문자열로 지정 (예: click, keydown, mouseover 등).
3. callback: 이벤트가 발생했을 때 실행될 함수입니다.
4. useCapture (선택적): 이벤트 전파 단계 설정 (true = 캡처 단계, false = 버블 단계, 기본값은 false).

 

버튼 클릭 시 위에 정의한 workingMemo() 함수를 실행하고, event.preventDefault() 는 기본 이벤트 동작을 막는 메서드로

브라우저가 수행하는 기본 동작(디폴트 동작) 을 취소한다.

        document.addEventListener("DOMContentLoaded", function () {
            const button = document.getElementById("saveMemo");
            button.addEventListener("click", function () {
                event.preventDefault();
                workingMemo();
            })
        })

 

아래 코드는 삭제 버튼을 클릭 시 버튼의 부모 요소인 <li></li> 필드를 삭제한다.

 

위에서 생략된 createElement() 로 생성한 <button class="delete"></button> 를 찾아

button 의 부모노드인 <li></li> 필드를 remove() 메서드를 사용해 삭제했다.

*remove() 메서드는 DOM 요소를 삭제하는 데 사용됩니다. 해당 메서드를 호출하면 선택된 요소가 DOM 트리에서 제거됩니다.

        const memoList = document.getElementById("memoList");
        memoList.addEventListener("click", (event) => {
            if (event.target.className === "delete") {
                if (confirm("삭제하시겠습니까?")) {
                    event.target.parentNode.remove();
                }
            }
        })

 

---

 

🙇‍♂️ 간단한 메모장을 구현하면서 "DOM(Document Object Model)" 제어 방식에 대한 이해와 습득 수준이 높아졌다.

DOM 의 기본 구조와 구성 요소를 익히고 많은 반복 연습을 통해 HTML 문서를 JavaScript를 통해 조작할 수 있게 되었다.