How can I get a handle or object reference to an HtmlElement from a WebBrowser control HtmlDocument?

Question

Think "Firebug", but entirely from C#.

I have a WebBrowser control that I've built a DOM tree for in a TreeView. I'd like to be able to set a link between each DOM element in the TreeView and its matching HtmlElement in the WebBrowser's Document so that when the node in the tree is clicked, the matching element in the Document highlights.

But, of course, the only availability on the surface for element access is GetElementById(), GetElementFromPoint() and GetElementsByTagName(). And, of course, not all web pages have Id's or Names associated with them. And since in my app's user experience the user won't be clicking the WebBrowser, but the TreeView, I don't have access to a Point either.

I'm experimenting with various options I've found in the API now. But it would be great if anyone out there has experience in this area. I can't seem to find detail on the web anywhere.

Thanx ahead of time!

Answer 1

Personally, I would utilize a JavaScript library such as JQuery to perform such a task. This library is easy to use and plenty of examples/plug-ins available (http://jquery.com). Using JQuery allows you not only to use IDs but also grab them by CSS class, anchor type, etc. Essentially, anything you can pull from HTML/CSS you can pull with JQuery.

If you would like to handle a HtmlElement from the code-behind you essentially have to assign it an ID as well as specify the RUNAT attribute. For example:

<textarea id="bodyText" runat="server"></textarea>

Hopefully this helps in some way!

Answer 2

Have you tried the All property?