JavaScript - DOM 트리 요약

웹 페이지 - DOM 트리

1. 문서노드
   트리의 최상위에는 문서노드가 존재하며, 이 노드는 전체 페이지를 표현한다.

2. 요소노드
   HTML 요소들은 HTML 페이지의 구조를 서술한다. 

3. 특성노드
   HTML 요소의 여는 태그에는 특성을 지정할 수 있으며, 이런 특성들은 DOM 트리 내에서 특성 노드로 표현 된다.

4. 텍스트노드
   일단 요소 노드에 접근하면 해당 요소 내부의 텍스트에 접근할 수 있다.

NODELIST : 하나 이상의 요소를 리턴하는 DOM Query

참고로, NodeList 객체는 배열과 유사하게 보이며 동일한 방식으로 요소에 번호를 부여하지만 실제로 배열은 아니다. 이 객체는 컬렉션이라고 부르는 타입의 객체이다.

• Live NodeList 객체를 사용하면 스크립트를 이용하여 페이지를 수정할 때 NodeList 객체의 요소들도 동시에 수정 된다. getElementBy로 시작하는 메소드들은 Live NodeList 객체를 리턴한다. 또한, 이 객체들은 Static NodeList 객체를 생성하는 메소드들보다 비교적 빨리 동작한다.

• Static NodeList 객체를 사용하면 스크립트를 이용하여 페이지를 수정하더라도 NodeList 객체에 저장된 요소들은 스크립트에 의한 변경의 영향을 받지 않는다. querySelector로 시작하는 새로운 메소드들은 Static NodeList 객체를 리턴한다. 즉, 이 메소드는 쿼리가 실행 되는 시점의 문서구조를 반영한다.

HTML 컨텐츠를 수정하는 기법

• document.write()
• element.innerHTML
• DOM 조작 방식

이 중에서 간략하게 말하자면, document.write()를 잘 사용하지 않는다.
innerHTML 같은 경우는 단점이 보안에 취약하기 때문에 사용자로부터 전달받은 콘텐츠를 추가 할 때 사용해서는 안 된다. 특히, 이벤트 핸들러가 의도한 대로 동작하지 않는다.

DOM 조작 방식은 단점이 대량의 콘텐츠를 변경해야 할 때 innerHTML 속성보다 느리게 동작한다.

특히, innerHTML을 사용할 때는 크로스 사이트 스크립트 공격에 대해 알아 둘 필요가 있다.

크로스 사이트 스크립트 공격 방지하기

• 서버로 전달 되는 모든 입력 데이터에 대한 유효성 검사를 실시한다.
• 서버 및 데이터베이스로부터 제공 되는 데이터를 안전하게 처리한다.
• 사용자가 반드시 필요한 문자만 사용할 수 있도록 하며, 페이지에 콘텐츠가 노출될 영역 또한 제한해야 한다.
• 사용자가 생성한 콘텐츠 중 코드에서 사용되는 문자를 가지고 있는 것이라면 반드시 서버에서 이스케이프 처리를 해야 한다.
• HTML : 아래 문자들은 이스케이프 처리를 해야 한다.
  • & &
  • < &lt;
  • > >
  • ` `
  • ' '
  • " "
  • / /
• 자바스크립트
  • 절대로 신뢰할 수 없는 데이터는 절대로 자바스크립트 내에서 사용하지 않는다. 고로, 아스키 문자들로 이스케이프 처리를 한다.
• URL
  • 만일 사용자의 입력을 표시하는 링크가 있다면, 자바스크립트의 encodeURIComponent() 메소드를 이용하여 사용자의 입력을 인코딩한다.
• 사용자의 콘텐츠를 페이지에 추가하기
  • 신뢰할 수 없는 곳에서 만들어진 콘텐츠를 페이지에 추가할 때는 서버에서 이스케이프 처리 한 뒤, 페이지에는 텍스트로 추가한다.
• 자바스크립트
  • textContent 또는 innerText 속성을 이용한다.
• jQuery
• .text() 함수를 이용한다.

출처 : 존 두켓의 자바스크립트 & 제이쿼리

자바스크립트 & 제이쿼리 국내도서 저자 : 존 두켓(Jon Ducket) / 장현희역 출판 : 제이펍 2015.03.31 상세보기