[자바스크립트] - 검색창에 검색기록 추가, 삭제하는 예제/ 텍스트필드로 노드 추가, 삭제하기 / input태그에 사용자가 입력한 내용 받아오기 / value / parentNode / removeChild / insertBefore

 

html

<div id="container">
      <h1>Web Programming</h1>
      <p>공부할 주제를 기록해 보세요</p>
      <form action="">
        <input type="text" id="subject" autofocus />
        <!-- 버튼이 가지고 있는 기본 기능인 submit기능을 return false;로 취소시켜주고 함수만 실행한다.  -->
        <button onclick="newRegister(); return false;">추가</button>
      </form>
      <!-- hr은 수평선 태그 -->
      <hr />
      <ul id="itemList"></ul>
</div>

return false; -> 한번만 실행하게 한다. 

 

자바스크립트

 

 

    //1. 새로운 요소 만들고 연결하기

      function newRegister() {

        let newItem = document.createElement("li"); //<li></li>생성

        let subject = document.querySelector("#subject"); //input태그 선택

        //input태그에 사용자가 입력한 내용(value)를 텍스트 노드로 생성

        let newText = document.createTextNode(subject.value);

        //필드에 입력된 값을 li에 추가하기

        newItem.appendChild(newText);

        //부모노드인ul을 선택해서 가져오기

        let itemList = document.querySelector("#itemList");

        //ul안에 동적으로 생성한 li 추가하기

        itemList.insertBefore(newItem, itemList.childNodes[0]);

        /*.insertBefore

        --------------------------------

        최근 검색한 글이 맨 위에 있도록 하는 법

        appendChild()매서드를 이용하면 새로운 노드를 부모노드의 맨 끝에 추가한다.

        추가되는 노드의 순서를 바꿔 표시하려면 부모노드와 자식노드의 관계를 파악한 후에 마지막 자식 노드를 맨 앞에 추가하면 된다.

        */

        //다음 입력을 위해 텍스트필드를 비우기 - 사용자가 입력한 값을 빈문자로 바꿔라

        subject.value = "";

        //지우려는 li의 부모 노드 찾기 콘솔창에 치면 부모 나온다.

        //document.querySelectorAll("li")[1].parentNode;

        //추가된 li들을 모두 가져오기

        let items = document.querySelectorAll("li");

        for (let i = 0; i < items.length; i++) {

          items[i].addEventListener("click", function () {

            //부모노드가 있다면 부모노드에서 삭제해라 여기서 this는 i를 가르킨다.

            if (this.parentNode) {

              this.parentNode.removeChild(this);

            }

          });

        }

      }

 

 

---

 .insertBefore( ) 

최근 검색한 글이 맨 위에 있도록 하는 법
 appendChild()매서드를 이용하면 새로운 노드를 부모노드의 맨 끝에 추가한다. 
추가되는 노드의 순서를 바꿔 표시하려면 부모노드와 자식노드의 관계를 파악한 후에 마지막 자식 노드를 맨 앞에 추가하면 된다. itemList의 자식 노드 중 맨 앞의 자식 노드는  itemList.childNodes[0]으로 접근할 수 있다. 

이 노드 앞에 새로운 노드를 추가하려면 .insertBefore()매서드를 사용할 수 있다. 

[기본형]

부모노드. .insertBefore(추가할 노드,노드위치);

---

  input태그에 사용자가 입력한 내용 받아오기 .value 

   

텍스트필드와 같이 사용자가 입력한 내용을 자바스크립트로 받아올 때에는 .value프로퍼티를 이용한다. 
먼저 입력값을 받아올 input태그를 먼저 선택해서 변수에 담아둔 다음 변수명.value를 해주면 현재 입력되어 
있는 자바스크립트를 가져올 수 있다. 

 

  [기본형]
    1. 요소선택.value;
    : 현재 요소에 입력된 값을 가져온다. 

    2. 요소선택.value = '값';
    : 현재 요소에 입력된 값을 바꾼다.

---

  노드 삭제하기 

    

DOM트리에서 특정 노드를 삭제할 때 특정 노드를 삭제할 때 
반드시 부모노드에서 자식 노드를 삭제해야한다. 
삭제해야 할 노드가 있다면 반드시 부모 노드를 먼저 찾아야한다. 
그래서 노드를 삭제하는 매서드 외에도 부모 노드를 찾는 프로퍼티가 필요하다. 

  1. parentNode 프로퍼티   

DOM트리의 노드는 바로 삭제할 수 없다. 먼저 부모 노드에 접근해야 한다. 
그러려면 삭제할 노드의 부모 노드를 찾아 가는 방법을 알아야한다. 
parentNode 프로퍼티는 현재 노드에 접근하여 부모 노드의 요소 노드를 반환한다.(부모노드가 누구인지 찾아줌) 

 [기본형]
 
지울려는 자식노드.parentNode;

    

  2. removeChild()매서드  

부모노드를 찾고 난 후 부모노드 안에 있는 자식 노드를 삭제하고 싶다면 removeChild()매서드를 이용한다. 
이름에서도 알 수 있듯이 자식노드를 삭제하는 매서드이다. 
예를 들어 li노드를 삭제하려면 li.parentNode.removeChild(li)이런 식으로 작성한다. 

[기본형]
  
부모노드.removeChild(자식노드);

   

만약에 x를 눌렀을 때 지워지게 할려면 x 자도 같이 동적으로 생성해야 한다. 

만약 x가 들어간다면 요소를 지울 땐 부모에 접근해야하니깐

parentNode를 두번 적어줘야한다. x의 부모는 li가 되고 li의 부모 ul에 접근해야하니깐.