마크업만 완료된 벤딩머신을 JavaScript를 이용해서 동적으로 만드는 개인 프로젝트를 진행중이다. 거기서 사용한 메서드들을 계속해서 기억하기 위해서 글을 작성해보려고 한다.
프로젝트를 진행하면서 이후에 들어오는 데이터에 따라서 동적으로 구현된 요소들이 필요하게 되었다.
이를 구현하기 위해서 Javascript를 이용해서 DOM을 조작해서 요소 노드를 생성해보자!!
요소 노드 생성하기(feat. createElement)
요소 노드 생성
let element = document.createElement(tagName[, options]);HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement (en-US)를 대신 반환합니다.
벤딩머신 프로젝트에서 받아온 데이터를 가지고 사진, 이름, 가격의 정보가 있는 버튼을 만들어 보자
const button = document.createElement('button');
const image = document.createElement('img');
const productName = document.createElement('strong');
const productPrice = document.createElement('span');다음과 같은 코드로 button, img, strong, span 요소를 생성했다. 메서드의 인자로는 생성하고 싶은 태그 이름을 넣어주면 된다.
여기서 끝인줄 알았지만, 아직 끝이 아니다!
왜냐면 createElement 메서드로 생성한 요소 노드는 기존 DOM에 추가되지 않고 홀로 존재한다.
우리는 새로 생성한 요소를 DOM에 추가시켜줘야한다!
DOM에 추가되어야 하는 이유는..
HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이루어지며, HTML 요소는 중첩관계를 갖는다. 이에 의해 계층적인 부자관계(parent-children)가 형성된다. 이러한 HTML 요소의 부자관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.
결론 = 모든 HTML 요소는 DOM을 구성하는 요소 노드 객체로 변환되어 트리 자료 구조로 구성되기 때문에 DOM에 추가시켜줘야함!
추가하지 않으면 새로 생성한 노드를 어디에다가 위치시킬지에 대한 정보가 없으니까 화면에서 보이지 않게된다.
요소 노드 DOM에 추가하기(feat.appendChild & append)
요소 노드 추가
var aChild = element.appendChild(aChild);Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)
이제 아까 만들었던 요소를 DOM에 추가해보자
listItem.appendChild(button);
button.append(image,productName,productPrice);아까 만들었던 button 요소는 이전에 만들었던 listItem 요소의 마지막 자식 요소로 추가해준다. 이 과정이 꼭 있어야 새롭게 생성한 요소 노드가 DOM에 추가되는 것이다!
그렇다면 위에서 쓰인 append는 무엇을 의미할까?
appendChild와는 무엇이 다를까?
여기서 다르게 쓴 이유는 append는 한번에 여러 개의 자식 요소를 설정할 수 있기 때문이다.
image, produceName, producePrice 3개의 자식요소를 한꺼번에 button의 자식요소로 설정하기 위해서 사용했다.
그 이외에 차이점은 append는 노드 객체와 DOMstring(text)를 사용할 수 있고 return값이 없다는 점, appendChild는 오직 노드 객체만 받을 수 있고 return 값이 있다는 것이다.
표로 정리하면 다음과 같다.
| 항목 | appendChild | append |
|---|---|---|
| 한번에 여러 자식 요소 설정 | X | O |
| 노드 객체 | O | O |
| DOMstring | X | O |
| Return값 반환 | O | X |
이러한 방법을 이용해서 아래와 같이 데이터에 따라 동적으로 생성되는 자판기의 콜라 선택창을 만들었다.
이것 이외에도 class를 추가하는 코드가 있고, css 파일이 따로 존재하지만 설명을 위해 생략하였다.
