DOM 노드의 생성, 수정, 삭제

자바스크립트를 사용하면 DOM 의 모든 노드들을 생성, 수정, 삭제, 복사, 이동 할 수 있습니다.

DOM 노드를 제어하는데 필요한 모든 속성과 메서드를 제공하기 때문에 메서드와 속성의 갯수가 많기 때문에, DOM 을 제어할 때 적절한 메서드를 사용해야 원하는 결과를 얻을 수 있습니다.

 

자바스크립트의 노드 제어를 위한 속성과 메서드들을 알아보겠습니다.

 

메서드, 속성	타입	설명
appendChild()	DOM 메서드	선택한 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가함. DOM 메서드로 엘리먼트(노드) 객체만 사용 가능 붙인 노드 오브젝트가 반환됨. 노드 1개만 추가 수 있음.
remove()	DOM 메서드	현재 엘리먼트를 삭제. 삭제할 엘리먼트의 참조만 있으면 됨. 인터넷 익스플로러 미지원
removeChild()	DOM 메서드	현재 엘리먼트의 자식 엘리먼트 1개를 삭제. 부모 엘리먼트와 삭제할 엘리먼트 2개의 참조가 필요함.
replaceChild()		현재 엘리먼트르 다른 엘리먼트로 대체합니다. 대체된 노드는 반환 값으로 얻을 수 있습니다.
insertBefore()	DOM 메서드	부모노드.insertBefore(추가할새노드, 기준참조노드); 기준 참조 노드 앞에 새노드를 추가합니다.실행 후 추가된 새 노드 참조를 반환합니다.(추가한 노드가 문서 프래그먼트인 경우 빈 프레그먼트를 반환) insertAfter() 는 제공되지 않습니다.
hasChildNodes()	DOM 메서드	자식 노드가 있으면 true, 없으면 false 반환
cloneNode()	DOM 메서드	현재 노드를 복사해 반환합니다. 파라메터로 true/false 를 인자로 보낼 수 있습니다. true 면 노드가 담고 있는 텍스트 등 내용까지 복사됩니다. false 면 노드 외형만 복사합니다.
previousSibling nextSibling	DOM 속성	previousSibling: 이전 이웃 노드 반환 nextSibling: 다음 이웃 노드 반환   반환할 이웃 노드가 없으면 null 반환
insertAdjacentElement()	DOM 메서드	대상 엘리먼트의 태그 안과 밖 위치에 엘리먼트를 추가합니다. 대상엘리먼트.insertAdjacentElement(위치, 추가할요소); 위치값은 beforebegin, afterbegin, beforeend, afterend 4개를 지원합니다. 대상 엘리먼트 바깥앞(beforebegin), 바깥뒤(afterend), 안쪽내용앞(afterbegin), 안쪽내용뒤(beforeend) 에 엘리먼트를 추가합니다. 엘리먼트 노드에만 사용할 수 있으며, 태그쌍을 기준으로 시작태그와 끝나는 태그의 앞뒤에 삽입하는 방식입니다. 엘리먼트 추가에 성공하면 추가된 엘리먼트가 반환되며, 실패하면 null을 반환합니다.
firstChild lastChild	DOM 속성	firstChild: 첫번째 자식 노드를 반환 lastChild: 마지막 자식 노드를 반환
firstElementChild lastElementChild	DOM 속성	firstElementChild: 첫번째 자식 엘리먼트를 반환 lastElementChild: 마지막 자식 엘리먼트를 반환   자식 엘리먼트가 없을 경우 null 반환
children	DOM 속성	현재 노드의 모든 자식 엘리먼트 노드 컬렉션을 반환함. 배열 순환하는 방식으로 반환된 컬렉션을 순환할 수 있음. 엘리먼트 노드만 반환함.
createElement() createTextNode()	DOM 메서드	createElement(): 엘리먼트를 생성함. 파라메터에는 태그 이름만 사용 가능. 생성된 엘리먼트 노드 객체를 반환함. createTextNode(): 텍스트 노드를 생성해 텍스트 노드를 반환함.
before() after()	자바스크립트 메서드	after(): 선택한 노드의 뒤에 추가함. before(): 선택한 노드의 앞에 추가함.   문자열, 엘리먼트(노드) 객체 모두 추가 요소로 사용 가능하며, 문자열을 인자로 넣을 경우 텍스트 노드가 추가됨. 반환값이 없음(undefined 반환) 나머지 파라메터로 여러 개의 노드와 문자열을 추가하는 것이 가능. 인터넷 익스플로러 미지원.   createTextNode(), createElement() 이용한 노드 생성 및 추가 과정을 before()/after() 1개의 메서드로 줄여서 사용할 수 있기 때문에 코드 최적화 및 가독성 향상에 유리합니다. 가급적 before(), after() 메서드를 사용해 DOM 을 제어하는 것을 추천합니다.
prepend() append()	자바스크립트 메서드	prepend(): 현재 엘리먼트의 첫번째 자식 엘리먼트 앞에 추가함. append(): 현재 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가함.   문자열, 엘리먼트(노드) 객체 모두 추가 요소로 사용 가능하며, 문자열을 인자로 넣을 경우 텍스트 노드가 추가됨. 반환값이 없음(undefined 반환) 나머지 파라메터로 여러 개의 노드와 문자열을 추가하는 것이 가능. 인터넷 익스플로러 미지원.   createTextNode(), createElement() 이용한 노드 생성 및 추가 과정을 prepend()/append() 1개의 메서드로 줄여서 사용할 수 있기 때문에 코드 최적화 및 가독성 향상에 유리합니다. 가급적 prepend(), append() 메서드를 사용해 DOM 을 제어하는 것을 추천합니다.