IE 解析 Web Page DOM结构 (一)

IE 浏览器利用DOM结构管理和运用网页的数据的。IE 浏览器通过一个容器IWebBrowser2/IHTMLWindow2来下载一个网页，而众所周知网页是由互相嵌套的许多frames构成的，网页中每一个frame都是IHTMLWindows2。所以，我们的首要任务就是取得IHTMLDocument2接口，此接口代表着你所下载的网页。然后，就可以用递归探索每一个frame和frame中的内容。
这可以用下面的代码达到目的：
CComPtr<IWebBrowser2> m_pwebBrowser;
If(!m_pwebBrowser) return;
CComPtr<IDispatch> spDispDoc;
HRESULT hr = m_pwebBrowser->get_Document(&spDispDoc);
If(FAILED(hr)) return;
CComPtr<IHTMLDocument2> spDocument2 = spDipDoc;
If(!spDocument2) return;
//OK, here we find IHTMLDocument2!!!

其实，IE DOM结构是一颗数据树，我们能通过他取得任何HTML源码中代表的任何东西，即使在网页中那些被隐藏起来，无法看见的东西，我们也可以通过解析DOM树而得到我们想要得到的东西。

另外，我们还需要一个额外的数据流 – CSS。因为它里面包含了你所下载的网页风格设计。当你需要了解从DOM流解析出来的元素细节上的风格，比如字体大小，字体颜色，字体名字等等，这些信息你只能从CSS中获取。
可以按下面的代码来取得CSS数据流：
CComQIPtr<IHTMLElement> spElement;
CComQIPtr<IHTMLElement2> spElement2(spElement);
CComQIPtr<IHTMLCurrentStyle>spCurrentStyle;
spElement2->get_currentStyle(&spCurrentStyle);

好了，现在可以看看MSHTML DOM结构树了，我们需要利用图中每一个接口来获取我们想要得到的网页中的数据。





很明显，IHTMLDocument2， IHTMLDomNode和IHTMLElement是三个非常重要接口。特别是IHTMLElement是个关键接口，也是我们需要重点关注的。因为它代表着网页中的任何对象， 他也提供了网页中所有对象的共同属性和行为。

根据上述分析，我设计了下面的流程图来解析DOM：





下面的文章我将按照这张流程图来介绍网页中几种比较重要元素的解析过程，这些元素包括：文字，图片，控件以及非常复杂的网页布局。

另外,介绍一个开发网页时一个很有用的工具 - Internet Explorer Developer Toolbar,我也基本上用它来分析DOM树的.
http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en