🎶 DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다.
(🎃리플로우와 리페인트란, DOM 요소가 변경됐을 때 이 변화를 적용시켜 다시 리렌더링 하는 작업을 뜻한다.)
(1) innerHTML
<!DOCTYPE html>
<html>
<body>
<div id='a'>Hello <span>guy</span></div>
</body>
<script>
console.log(document.getElementById('a').innerHTML);
// "Hello <span>guy</span>"
</script>
</html>
Element.prototype.getElementById 프로퍼티는 setter과 getter 모두 존재하는 접근자 프로퍼티로서, 요소 노드의 HTML 마크업을 취득하거나 변경한다. innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열을 그대로 반환한다.
<!DOCTYPE html>
<html>
<body>
<div id='a'>Hello <span>guy</span></div>
</body>
<script>
document.getElementById('a').innerHTML = 'Hi <span>guy</span>';
</script>
</html>
이처럼 innerHTML 프로퍼티를 사용하면 HTML 마크업 문자열로 간단히 DOM 조작이 가능하다. 단, 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크럽팅 공격(XSS)에 취약하므로 위험하다. HTML 마크업 내에 자바스크립트 악성 코드가 포함되어 있다면 파싱 과정에서 그대로 실행될 가능성이 있기 때문이다.
즉, innerHTML 프로퍼티를 사용한 DOM 조작은 구현이 간단하고 직관적이라는 장점이 있지만, XSS 공격에 취약하다는 단점도 있다.
(🎃 이 XXS 공격을 예방하기 위해 아래와 같은, 잠재적 위험을 제거하는 기능인 HTML 새니티제이션( HTML sanitization)을 사용하기도 한다.)
DOMPurify.sanitize('<img src = 'a'>');
(2) insertAdjacentHTML
Element.prototype.insertAdjacentHTML 메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입하는 메서드로, 두 번째 인수로 전달하는 HTML 마크업 문자열을 파싱하고 그 결과로 생성된 노드를 첫 번째 인수로 전달된 위치에 삽입해 DOM에 반영한다.
<!DOCTYPE html>
<html>
<body>
<div id='a'>
text
</div>
</body>
<script>
const $a = document.getElementById('a');
$a.insertAdjacentHTML('beforebegin', '<p>text</p>');
$a.insertAdjacentHTML('afterbegin', '<p>text</p>');
$a.insertAdjacentHTML('beforeend', '<p>text</p>');
$a.insertAdjacentHTML('afterend', '<p>text</p>');
</script>
</html>
<div> 앞 부분이 beforbegin, <div>와 text 사이가 afterbegin, text와 </div> 사이가 beforeend, </div> 뒷 부분이 afterend 이다. innerAdjacentHTML 메서드는 기존 요소에는 영향을 주지 않고 새롭게 삽입될 요소만을 파싱하여 자식 요소로 추가하므로 기존의 자식 노드를 모두 제거하고 다시 처음부터 새롭게 자식 노드를 생성하여 자식 요소로 추가하는 innerHTML 프로퍼티보다 효율적이고 빠르다.
'자바스크립트' 카테고리의 다른 글
| [JS] 이벤트 - 이벤트 핸들러 제거 방법과 이벤트 객체 (0) | 2025.02.19 |
|---|---|
| [JS] 어트리뷰트 - HTML 어트리뷰트와 DOM 프로퍼티 (0) | 2025.02.17 |
| [JS] 이벤트 - 이벤트 타입과 이벤트 핸들러 등록 (0) | 2025.02.15 |
| [JS] 노드 생성, 추가, 삽입, 복사, 교체, 삭제 (2) | 2025.02.13 |
| [JS] DOM - HTML 요소와 노드 객체, 그리고 요소 노드 취득 방법 (0) | 2025.02.09 |
| [JS] HTMLCollection, NodeList + 노드탐색 (0) | 2025.02.05 |
| [JS] 브라우저 렌더링 - 파싱, 렌더링, DOM, CSSOM, 렌더 트리, AST, HTTP 1.1 그리고 2.0 (0) | 2025.02.03 |
| [JS] Map - Map(), size, set, get, has, delete, clear, forEach (0) | 2025.02.01 |