들어가며
새로운 함수의 등장은 기존 함수와 다른 특이점을 알아보고 재미난 요소를 발견하는 데 흥미를 느끼게 됩니다. innerHTML의 대체 함수한다는 어떤 부분이 눈에 띄었을까요 ? 그 전에 먼저 innerHTML부터 간략하게 살펴보겠습니다.
innerHTML
element 내의 html를 출력하거나 입력합니다.
const test = document.querySelector('div');
test.innerHTML = '안녕하세요';
console.log(test);
‘안녕하세요’
test.innerHTML = '<p>하위 요소가 생겼어요</p>';
console.log(test);
<div>
<p>하위요소가 생겼어요</p>
</div>
innerHTML 대체하기
함수명에서도 유추할 수 있듯이 설정과 출력이 각각 나눠었습니다.
- 설정: setHTMLUnsafe
- 출력: getHTML
setHTMLUnsafe
element 내에 html를 설정합니다.
setHTMLUnsafe는 innerHTML와 다르게 섀도우 DOM(declarative shadow DOM)을 사용할 수 있습니다. 섀도 DOM은 아래와 같습니다.
input type range은 input만으로 만들 수 없는 모양을 가지고 있습니다. 수치를 측정할 수 있는 bar도 있고 controller도 있기 때문이죠. 이런 모양을 만들 수 있는 건 바로 섀도 DOM을 사용했기 때문입니다. 좀 더 자세한 내용은 다음 포스팅에서 다뤄보려고 합니다.
unsafe(안전하지 않음) 합니다.
innerHTML와 같이 설정값을 검증하지 않습니다. 즉, Cross-Site Scripting(XSS: 악성 스크립트를 설정하는 것)으로부터 안전하지 않습니다.
const helloImg = document.querySelector('img');
helloImg.setHTMLUnsafe(`<p>안녕하세요.</p>`);
console.log(helloImg);
<img src=“” alt=“” />
<p>안녕하세요.</p>
</img>
setHTML 또한 있습니다.
setHTMLUnsafe와 다르게 안전한 setHTML가 있습니다. 그러나 아직 표준화 중이기 때문에 모든 브라우저에서 지원을 하고 있지 않습니다. (현재는 파이어폭스 플래그 활성화 시 사용할 수 있다고 합니다.)
getHTML
innerHTML의 출력에 해당합니다. 설정과 다르게 unsafe 버전은 없습니다.
const test = document.querySelector('div');
test.innerHTML = '안녕하세요';
console.log(test.getHTML());
// 안녕하세요
마치며
innerHTML의 대안으로 setHTMLUnsafe, getHTML 알아보았습니다. 함수의 기능과 더불어 섀도 DOM과 함수 안정성의 유무, 그에 따른 함수 기능의 차이 등 단순히 함수의 기능이 아닌 영역에 대해 살펴볼 수 있었는데요. 섀도 DOM은 다음 게시글에 자세히 다룰 예정이니 참고 부탁 드립니다.
감사합니다.
참고 문서