프로그래밍/JavaScript

JavaScript - DOM 트리 요약

seungdols 2016. 9. 13. 18:30

웹 페이지 - 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;
      • > &gt;
      • ` &#x60;
      • ' &#x27;
      • " &quot;
      • / &#x2F;
    • 자바스크립트
      • 절대로 신뢰할 수 없는 데이터는 절대로 자바스크립트 내에서 사용하지 않는다. 고로, 아스키 문자들로 이스케이프 처리를 한다.
    • URL
      • 만일 사용자의 입력을 표시하는 링크가 있다면, 자바스크립트의 encodeURIComponent() 메소드를 이용하여 사용자의 입력을 인코딩한다.
    • 사용자의 콘텐츠를 페이지에 추가하기
      • 신뢰할 수 없는 곳에서 만들어진 콘텐츠를 페이지에 추가할 때는 서버에서 이스케이프 처리 한 뒤, 페이지에는 텍스트로 추가한다.
    • 자바스크립트
      • textContent 또는 innerText 속성을 이용한다.
    • jQuery
      • .text() 함수를 이용한다.

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


반응형