[JS] DOM과 노드 추가, 삭제

DOM 은 문서 객체 모델로 자바스크립트에서 모든 요소를 객체로 보는 것이다.

queruSelector도 DOM을 기반으로 한 것이고 DOM을 이용해 모든 요소에 접근 및 수정이 가능.

​

이를 이용해 원하는 요소를 추가하거나 제거할 수 있으면 변경도 가능한데 아래 간단한 예제가 있다

​

노드 추가 및 연결

부모노드.appendChild(자식노드);
const newElementNode = document.createElement(노드 이름);
const newTextNode = document.createTextNode(텍스트);
// 텍스튼노드는 요소노드에 appendChild로 연결 가능

const newAtrribute = documnet.createAttribute(속성명);
요소명.setAttribteNode(속성노드);
// 속성노드는 setAttributeNode로 요소에 연결 가능 그리고 요소를 appendChild로 다른 요소에 연결

노드 삭제

노드.parentNode; // 부모노드 탐색

부모노드.removeChild(자식노드); //노드 삭제

ex )
삭제할노드.parentNode.removeChild(삭제할노드);

이것들을 이용해 노드를 추가하고 삭제할 수 있다.