HtmlDocument Introspection in Treeview

• Download HtmlIntrospection - 55.79 KB

Introduction

After my article XML Introspection and TreeView , I take a look about the webbrowser component. and I discover this component have a property HtmlDocument (webBrowser1.Document). This is a good way to get info of the webpage , without parsing Html, the webbrowser component make it for you.  

Background 

  I want to expose to you here, a little application showing a webpage ( in the screenshoot the codeproject page ) and get information in the HtmlDocument ( tree of HtmlElement ).

Showing theses in a treeview and show in right a preview , and display property in a propertygrid ( right and bottom ). 

Using the code 

Enter an URL in the text entry  and press the Go button.  

When the web page is loaded, then the Event Handler webBrowser1_DocumentCompleted is call.

So we catch all html tag of body , forms , links, Images, and CSS

For each type there's a method:

private void FillTree(HtmlElement hElmFather, TreeNodeHtmlElm t,TreeNodeHtmlElm.TypeNode type) 

private void FillTreeForm(HtmlDocument doc, TreeNodeHtmlElm t) { 

System.Collections.IEnumerator en = doc.Forms.GetEnumerator();
while (en.MoveNext())
{
    FillTree((HtmlElement)en.Current,t,TreeNodeHtmlElm.TypeNode.Form);
}

private void FillTreeLink(HtmlDocument doc, TreeNodeHtmlElm t) 

// To find all link : string textToAdd = e.GetAttribute("href"); where e is a HtmlElement

private void FillTreeImage(HtmlDocument doc, TreeNodeHtmlElm t) 

// To find all image : string textToAdd = e.GetAttribute("src");

At each time we use a tempory array to not concider same img or link.

private void FillTreeCss(HtmlDocument doc, TreeNodeHtmlElm t)

For the CSS, the test is : 

if(e.TagName.ToLower() == "link")
           {
               if (e.GetAttribute("rel").ToLower() == "stylesheet")

So, the information are structured in a treeview, each element of treeview is a class TreeNodeHtmlElm : TreeNode.

Points of Interest 

I found interesting to explore a webpage in this way, a different way to see one.

I have a problem with tree view because the text of the node a too huge, and then the application is really slow when tooltips appear so I limit the size of 100:  

public TreeNodeHtmlElm(HtmlElement elm,TypeNode t) : base()
{
    type = t;
    mHtmlElement = elm;
    try
    {
        if (elm.OuterText == null || elm.OuterText == "")
        {
            Text = elm.OuterHtml;
        }
        else
        {
            if (elm.OuterText.Length > 100)
            {
                Text = elm.OuterText.Substring(0, 100);
            }
            else
            {
                Text = elm.OuterText;
            }
        }
    }
    catch (Exception e)
    {
        Text = "";
    }

If you click on the treenode, the application make a preview a the piece of html, in the windows a the right top. 

You can right click, and the there's a content menu , and you can save ( SaveTreeNodeHtml ) the Text of the subnodes.

It don't work for image , it doesn't save image only url of image, it could be inteesting in another version to download and save the image , the same for the CSS.

Please take a look of my different page

http://www.cmb-soft.com/ a css editor

My homepage http://vidalcharles.free.fr/

I'm looking for a job, if anybody have a job proposition please email me at charles.vidal(at)gmail.com thanks.