🦎 [딥다이브 스터디] 2nd- 39. DOM

이지·2021년 9월 11일

DeepDive

목록 보기

3/13

1. querySelectorAll로 취득한 요소 노드와 getElementsByTagName으로 취득한 요소 노드의 공통점과 차이점을 설명해보시오.

query selector all ⇒ 인수로 전달한 css 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환. 여러개의 요소 노드 객체를 갖는 dom 컬렉션 객체인 nodelist를 반환한다. 이는 유사배열객체이면서 이터러블이다.

htmlcollection VS nodelist : htmlcollection은 live nodelist, nodelist는 static 형태의 node list를 반환한다. getElementsByTagName method 는 htmlcollection을, querySelectorAll은 static node list를 반환하기 때문에, live nodelist 는 위험성을 가지고 있다.

example

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 

</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
<script>

var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2 
    elems2 = document.querySelectorAll("a");  // return 2 elements, elems2.length = 2 

document.body.appendChild(document.createElement("a")); 

console.log(elems1.length, elems2.length);  // now elems1.length = 3! 
                                            // while elems2.length = 2
</script>
</html>

2. 요소 노드의 텍스트를 조작하는 방법을 최소 2개 이상 말하고 각각의 차이점에 대해서 설명해보시오.

createtextnode ⇒ 텍스트노드는 요소노드의 자식노드이지만, 이를 통해 생성한 텍스트노드는 요소 노드의 자식노드로 추가되지 않고 홀로 존재한다. 따라서 이후에 생된 텍스트 노드를 요소 노드에 추가하는 별도 처리가 필요하다. ex. appendChild..

요소 노드에 자식노드가 하나도 없는 경우에는 텍스트 노드를 생성하여 요소 노드의 자식노드로 텍스트노드를 추가하는 것 보다 textContext 프로퍼티를 사용하는 편이 훨씬 간편하다. 단, 요소 노드에 자식노드가 있는 경우 모든 자식 노드가 제거되고 할당된 문자열이 텍스트로 추가되므로 주의해야한다.

HTML Collection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에 for문을 순회하여 노드 객체의 상태를 변경하는 것을 주의해야 한다.

3.htmlcollection 객체를 for 문으로 순회하며 노드 객체를 변경할 때 주의해야할 사항은? 그리고 이를 회피하는 방법은 무엇일까?

htmlCollection은 유사배열로live nodelist 형태이기 때문에, 노드객체를 삽입하거나 생성할 때, index의 값이 계속 변하기 때문에 for문을 돌릴 때 버그가 발생할 수 있다. 이 문제를 회피하기 위한 방법으로는 1. for문을 역순으로 순회하여 노드 객체의 상태를 변경한다. 2. while문을 사용하여 모든 노드 객체의 상태가 바뀔때까지 반복한다. 3. 유사 배열을 객체를 배열로 변경한 뒤, 배열이 가진 고차함수인 forEach 메서드를 통해 노드 상태를 변경한다. 등 3가지 방법이 있다.

4. 사용자로부터 입력받은 데이터를 그대로 inner HTML 프로퍼티에 할당하는 것은 어떤 문제를 발생시킬 수 있는가: 예시 + 예방법

XSS(Cross Stie Scripting) 공격에 취약하다.

XSS 공격은 관리자의 권한이 없는 hacker가 사용자가 입력한 값에 대한 검증과 사용자가 입력한 값을 그대로 출력하는 동작에 침투하여 스크립트를 삽입, 공격하는 기법이다. 대부분 사용자가 글을 쓰고 읽을 수 있는 게시판에서 많이 발생한다.

이를 예방하기 위해서는 사용자로부터 입력받은 데이터의 잠재적 위험을 제거하는 HTML sanitization 과정이 필요하다. 직접 구현할 수도 있지만 안정적으로 배포되어 사용중인 DOMPurify를 사용하는 것을 권장한다.

XSS를 막아주는 Anti XSS 라이브러리를 사용해도 손쉽게 XSS를 방어할 수 있다. XSS 라이브러리를 사용하는 것은 서버 단에서 개발자가 추가하는 것이고, 사용자들이 각자 본인의 브라우저에서 악의적인 스크립트가 실행되지 않도록 방어하는 것이 중요하다. 즉 , 보안 강화를 위해 프/백 모두에서 예방할 수 있다.

5. insertAdjacentHTML 이 innerHTML 메서드에 비해 가지는 장점?

insertAdjacent와 innerHTML 메서드 둘 다 DOM 조작시 사용되는 메서드이다. 두 메서드는 textContent(innerText)와 다르게 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영된다는 공통점이 있다. 반면 textContent는 HTML 마크업이 파싱되지 않고 text 형태로 반영된다.

차이는 기존의 요소 노드를 제거하지 않고 요소 노드를 생성하고 삽입할 때 innerHTML은 위치를 지정할 수 없어 기존 노드를 제거했다가 새로운 노드와 같이 삽입해야 하기 때문에 성능적으로 좋지 않지만(reflow, repaint가 빈번하게 발생) insetAdjacent는 기존의 요소 노드는 삭제하지 않으면서 새로 생성한 노드를 위치를 지정해서 삽입할 수 있다는 점이다. 즉 더 효율적이다.

이지

이지피지레몬스퀴지🍋

이전 포스트

🦎 [딥다이브 스터디] 1st- 38.브라우저 렌더링과정2

다음 포스트