[JS] Node

Node

- document 내부에 있는 모든 것을 Node라고 한다.

- Element보다 좀 더 작은 개념이다.

- 하나의 요소를 Element Node와 Text Node로 나눌 수 있다.

- document 내부의 주석들은 Comment Node라고 부른다.

- 자바스크립트로 새 노드 객체를 생성하여 기존 노드에 추가할 수 있다.

 

Node를 사용해 새 요소 추가하기

const pushItem = () => {
    // (1) 새 element node를 생성
    const newDiv = document.createElement('div');
    // (2) 새 text node를 생성
    const newText = document.createTextNode('item' + itemNum++);
    newDiv.className = 'push';
    // (3) element node에 text node를 붙인다.
    newDiv.appendChild(newText);
    // (4) 새 element node를 out에 추가한다.
    out.appendChild(newDiv);
    // 자식 노드의 개수를 알 수 있다.
    console.log(out.childElementCount);
    // out.innerHTML += `<div>item${itemNum++}</div>`;
}

 

prepent(Node)

- 맨 앞에 자식 노드를 추가