2013-02-16 41 views
6

मैं एक HTML वेबसाइट की दस्तावेज़ संरचना को देखना चाहता हूं।एचटीएमएल दस्तावेज़ पेड़ (डीओएम पेड़) को देखने के लिए उपकरण

मैं करना चाहते हैं क्या कुछ इस तरह है:

enter image description here

वहाँ किसी भी ज्ञात उपकरण है कि ऐसा करने और जहां परिणाम एक बिटमैप फ़ाइल के रूप में सहेजा जा सकता है कर रहे हैं?

+1

मैं एक छोटे से बात यह है कि वास्तव में यह करता है बनाया:

यहाँ एक न्यूनतम काम कर उदाहरण है http://dok.github.io/dom - विज़ुअलाइजेशन/ – Sean

उत्तर

5

मैं डोम प्रतिनिधित्व बनाने के लिए लाटेक्स का उपयोग करता हूं।

\documentclass{scrreprt} 
\usepackage{tikz-qtree} 
\begin{document} 

    \Tree[.table 
     [.thead 
      [.tr 
      [.th [.\textit{Vorname} ] ] 
      [.th [.\textit{Nachname} ] ] 
      ] 
     ]    
     [.tbody 
      [.tr 
      [.td [.\textit{Donald} ] ] 
      [.td [.\textit{Duck} ] ] 
      ] 
     ] 
     ] 

\end{document} 

कौन देता है::

enter image description here

3

मैंने अभी दो पुस्तकालयों का उपयोग करने की कोशिश की है।

सबसे पहले मैं का उपयोग कर JSON करने के लिए डोम Jsonml

var jsonData = JsonML.fromHTMLText(htmlData); 

फिर jsFiddle में यह

देखें नमूने visualizing

  1. Using Json Editor
  2. Using Json Viewer
  3. के लिए Json Editor या Json Viewer इस्तेमाल किया परिवर्तित

उम्मीद है कि यह आपकी मदद कर सकता है।

+1

जिथब कच्चा यूआरएल काम नहीं करता है। आपको इसे बदलना चाहिए। Http://stackoverflow.com/a/18049842/815507 यहां और देखें – Kunukn