HTML5에서 Vanilla JavaScript를 활용한 DOM 조작: innerHTML vs DOMParser vs createElement

HTML5에서 Vanilla JavaScript를 활용한 DOM 조작

HTML5를 사용할 때 Vanilla JavaScript만을 이용하여 DOM을 생성하는 방법에 대해 알아보겠습니다. 다음은 각 방법별 예시 코드입니다.

1. innerHTML을 이용하는 방법

const container = document.getElementById('container');
container.innerHTML = '<p>Hello, innerHTML!</p>';

innerHTML은 간단하게 HTML 문자열을 DOM 요소의 내용으로 삽입합니다. 그러나 이 방법은 보안상 취약점을 내포하고 있고, 기존의 DOM 구조를 파괴할 수 있으므로 사용을 지양해야 합니다.

2. DOMParser를 이용하는 방법

const parser = new DOMParser();
const doc = parser.parseFromString('<p>Hello, DOMParser!</p>', 'text/html');
const element = doc.body.firstChild;
const container = document.getElementById('container');
container.appendChild(element);

DOMParser를 이용하면 문자열로부터 새로운 DOM 요소를 만들 수 있습니다. 이 방법은 innerHTML에 비해 보안적으로 안전하며, 더욱 정교한 제어가 가능합니다.

3. createElement를 이용하는 방법

const element = document.createElement('p');
element.textContent = 'Hello, createElement!';
const container = document.getElementById('container');
container.appendChild(element);

createElement를 사용하면 요소를 직접 생성하고 속성 및 내용을 설정할 수 있습니다. 이 방법은 더 구조적이며, innerHTML의 보안 문제를 회피할 수 있습니다.

4. template tag를 이용하는 방법

const template = document.getElementById('template');
const clone = document.importNode(template.content, true);
const container = document.getElementById('container');
container.appendChild(clone);

  <template id="template">
    <p>Hello, template!</p>
  </template>

template 태그를 사용하면 미리 작성된 템플릿을 정의하고 필요한 곳에서 가져와 사용할 수 있습니다. 이 방법은 동일한 템플릿을 여러 번 재사용할 수 있어 효율적입니다.

innerHTML의 사용을 지양해야 하는 이유:

innerHTML은 HTML 문자열을 그대로 삽입하기 때문에 스크립트 삽입과 같은 보안 취약점을 내포합니다. 또한, innerHTML을 사용하면 기존의 이벤트 리스너나 데이터가 파괴될 수 있습니다. 이에 비해 createElement나 DOMParser를 사용하면 보안상 안전하며 더 높은 제어 수준을 가질 수 있습니다.

innerHTML과 DOMParser 비교:

innerHTML은 간단하고 편리한 방법이지만 보안적인 문제와 기존 DOM 파괴의 위험성을 내포하고 있습니다. 반면에 DOMParser는 보안 측면에서 안전하며 문자열을 파싱하여 더 정교한 조작이 가능합니다. 따라서 보안과 제어력을 고려한다면 DOMParser를 사용하는 편이 좋습니다.

이렇게 다양한 방법으로 Vanilla JavaScript를 이용하여 DOM을 생성할 수 있습니다. 안전하고 구조적인 코드를 작성하면서 웹 애플리케이션을 개발하는 데 도움이 될 것입니다.