이번장에서는 웹페이지의 DOM 요소를 트리 형식으로 검색하고 그 특성을 쉽게 파악하게 해주는 유용한 툴을 알아보자. Dom Inspector 라는 툴인데 파이어폭스 브라우저를 설치하면 바로 사용할 수 있다. Dom Inspector 설치에 대한 설명은 http://blog.naver.com/jinoxst/140021809425 글의 HTML Validator 설치 부분을 참고하기 바란다.

파이어폭스를 이용해서 DOM 요소의 트리를 구경하고 싶은 싸이트로 접속한다. 그리고 메뉴->도구->Dom Inspector 를 클릭하면 아래와 같은 DOM Inpector 윈도우가 뜰 것이다.

DOM Inspector(파이어폭스 1.5.0.1 버젼) 는 크게 두개의 큰 창으로 구성되어 있다. 왼쪽에 있는 창은 웹페이지의 DOM 구성요소를 트리형태로 검색할 수 있으며, 오른쪽 창은 선택한 노드에 대한 자세한 정보를 확인할 수 있다. 재미있는 점은 왼쪽 창에서 해당 노드를 마우스로 클릭하면 DOM Inspector 를 구동시켰던 부모 윈도우에 빨간색 사각형으로 잠시나마 반짝거리며 그 위치를 알려 준다. 즉 노드를 선택하면, 선택한 노드가 웹페이지의 어느곳에 위치해 있고, 경계는 어디까지인지 눈으로 바로 확인할 수 있다.

왼쪽 창에서는 노드를 복사/이동/삭제할 수 있다. 노드를 선택하고 마우스 오른버튼을 누르면 해당 메뉴가 나온다. 노드를 수정했다면 부모창을 통해서 그 수정여부를 바로 확인 가능하다.

DOM Inspector 의 오른쪽 정보 창은 노드의 세부정보를 확인할 수 있을뿐만 아니라 값을 수정해서 반영된 결과를 부모창을 통해서 바로 확인 할 수 있다.

또한 DOM Inspector 는 노드의 id, tag, att 값을 이용해서 찾기 기능을 구현해 놓았다.

단순하지만 재미있는 DOM Inpector 툴을 한번 클릭해보자.