Javascript : 노드 추가, 노드에 속성 추가, 노드 삭제

🍵 노드 리스트

DOM에서 새로운 노드를 추가하거나 삭제하려면 node list를 사용한다. queryselectAll()메서드를 사용하면 노드를 한번에 가져올 수 있다. 이때 노드 정보를 여러개 저장한 것이 노드 리스트이다. 배열처럼 생겼으며 비슷하게 동작한다. 노드 리스트에는 인덱스와 요소값이 저장되고 length속성에 몇개의 노드가 저장되어 있는지 표시된다. 배열 문법을 이용하면 특정번째의 태그를 가져올 수 있다.

[기본형]
document.querySelectorAll('요소')[index]

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

1. 요소 노드 만들기
DOM에서 새로운 요소를 추가할 때는 가장 먼저 요소 노드를 만든다.
[기본형]
document.createElement('노드명');
노드명은 태그의 이름이다. 노드명은 텍스트.

2. 텍스트 노드 만들기
새로운 요소를 만들었다면 다음은 내용을 담는 텍스트 노드를 '자식노드'로 만들어 연결한다.
[기본형]
document.createTextNode('텍스트');

3. 자식 노드 연결하기
1번에서 만든 노드와 2번에서 만든 텍스트 노드는 노드가 만들어진 상태일 뿐이며 부모 자식으로 연결되지 않았다.
[기본형]
부모노드.prependChild(자식노드); 자식 중 맨 앞 추가
부모노드.appendChild(자식노드); 자식 중 맨 뒤 추가

	<div class="container">
  <button type="button" onclick="addP();">더보기</button>
  <div id="info"></div>
</div>

<script>
  function addP() {
    // 1. p 요소 노드 만들기
    let newP = document.createElement("p"); 
    //newP = <p></p>

    // 2. 텍스트 노드 만들기
    let textNode = document.createTextNode("텍스트 노드를 만들었습니다");
    // "텍스트 노드를 만들었습니다."

    // 3. 부모노드에 자식노드 연결하기
    newP.appendChild(textNode);
    // <p>텍스트 노드를 만들었습니다.</p>

    document.getElementById("info").appendChild(newP);
    // <div id="info"><p>텍스트 노드를 만들었습니다.</p></div>
  }
</script>


<button type="button" onclick="addLi();">리스트 추가하기</button>
<ul id="new">
  <li>html</li>
  <li>css</li>
</ul>

<script>
  //addLi 함수로 버튼 누르면 새로운 <li>javascript</li>추가

  function addLi() {
    let newLi = document.createElement("li");
    let textNode = document.createTextNode("javascript");
    newLi.appendChild(textNode);

    document.getElementById("new").appendChild(newLi);
  }
</script>

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

html 태그에서는 여러 속성을 사용해 웹 요소를 제어한다.
새로운 요소를 만들면 관련 속성 노드를 만들어 자식노드로 연결해야 한다.

1. 요소 노드 만들기
.createElement() 메서드를 이용해 태그 형태를 만든다

2. 속성 노드 만들기
.createAttribute() 메서드로 속성 노드를 만든다
[기본형]
let 변수 = document.createAttribute('속성명');
속성명을 만든 이후에는 속성 값을 추가한다.
변수.value = 값;

3. 속성 노드 연결하기
속성 노드는 요소 노드의 자식으로 연결한다.
setAttribute() 메서드 이용
만약 추가할 속성이 요소 노드에 이미 들어가 있으면 새 속성으로 대체한다.
[기본형]
부모노드.setAttribute(속성노드);

4. 자식노드 연결하기
위 단계까지 속성과 속성값을 연결했고 요소노드와는 연결되지 않았다.
.appendChild() 메서드로 연결한다.

<div class="container">
  <!-- this.onclick=''; 링크가 두번 클릭되는 것을 막는다 -->
  <a href="#" onclick="addContent(); this.onclick='';">더보기</a>
  <div id="info"></div>
</div>

<script>
  function addContent() {
    let newP = document.createElement("p");
    let text = document.createTextNode("이미지 설명");
    newP.appendChild(text);

    // 이미지 노드 생성
    let newImg = document.createElement("img");
    // 이미지 필수 속성 만들기
    let srcNode = document.createAttribute("src");
    let altNode = document.createAttribute("alt");
    // 속성에 값 추가
    srcNode.value = "./img/room.jpg";
    altNode.value = "room";
    // 노드와 속성 연결
    newImg.setAttributeNode(srcNode);
    newImg.setAttributeNode(altNode);
    // 현재 상태 <img src="./img/room.jpg" alt="room">

    document.getElementById("info").appendChild(newP);
    document.getElementById("info").appendChild(newImg);
  }
</script>

🍵 노드 삭제하기

자바스크립트로 생성된 노드는 querySelector나 getElementBy~로 가져와서 한번에 지울 수 없다. 새롭게 생성된 노드는 .removeChild() 메서드로 삭제한다. 먼저 부모노드를 불러와 안에 있는 자식노드를 삭제하는 방식.

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

	 // li 클릭하면 삭제하기
    let items = document.querySelectorAll("li");
    console.log(items);

    // 노드리스트 안을 순환하며 li개수만큼 반복
    for (let i = 0; i < items.length; i++) {
      // li[인덱스번호]에 클릭이벤트 추가
      items[i].addEventListener("click", function () {
        // this에 부모노드가 있다면
        if (this.parentNode) {
          // this인 부모노드에서 this인 자식노드 지우기
          this.parentNode.removeChild(this);
        }
      });
    }