QWebKit-Qt利用DOM API访问网页元素(百度博客下载例子)

Qt-4.6.0新增的一个功能就是QtWebKit提供了利用DOM访问管理网页的接口。

所谓DOM(文件对象模型)，就是把一个HTML网页内容以一个带层次结构的对象来处理，比如网页中的标题，段落，图表等都是这个层次对象中的一个节点。这些节点可大可小，顶级节点就是整个文档，最小的节点可以是网页中的一个链接，或者一个图片。利用DOM就能很方便的提取和处理网页中用户所感兴趣的内容。下面用一个对百度博客的处理来简单说明。

比如:http://hi.baidu.com/yobin/blog/item/9036520f8c85a1216159f366.html,这个网页里有博客的标题，博客的具体内容，以及前一篇和后一篇的链接。我们通过网页的源代码可以看到有

<div id=”m_blog” style=”overflow-x:hidden;”>
<div>这个城市(2)</div>
—-无关内容—

</div>

这里的<div>开始和</div>结束就是一个节点，id为”m_blog“在百度博客里指明是和博客内容相关的部分。对应在Qt里对应的对象类是QWebElement，如果我们要读取这里的标题可以用下面代码实现。

QWebElement doc = mainframe->documentElement();
QWebElement m_blog = doc.findFirst(“#m_blog”);
QWebElement e_title = m_blog.findFirst(“.tit”);
title->setText(e_title.toPlainText());

这里mainframe是QWebFrame类型的对象,mainframe->documentElement()获得了整个文章的内容，是顶级节点。通过doc.findFirst(“#m_blog”)可以找到整个文章中m_blog第一次出现的地方。然后再在这个节点里寻找class为tit的子节点，toPlainText()能够获得节点中的内容。注意findFirst里的参数语法#号开头的查找id名的，点号”.”开头的则是查找class名字的，如果没有前面符号的则是查找标准HTML标记比如findFirst(“body”)。当然这些语法可以组合起来使用，符合CSS选择器的标准语法，请参考Standard CSS2 selector syntax。查找QWebElement子元素的方法还有 firstChild(),nextSibling (),parent (),previousSibling()等，具体内容可以查看QWebElement的类帮助。

下面再来看一下前后篇文章链接的HTML代码是如何的.

<div id=”in_nav”>
上一篇：<a title=”新股中签的回报率” href=”/yobin/blog/item/86ad9223e5add74fad34de92.html”>新股中签的回报率</a>
下一篇：<a title=”人民时评：且看美国的信息自由” href=”/yobin/blog/item/dc3491587b51cbd59c8204ba.html”>人民时评：且看美国的信息自由</a></div>

HTML中除了标签内容之外，还有关于这个标签的属性，可以用attribute()来得到，下面是Qt读取链接的代码

QWebElement e_nav=m_blog.findFirst(“#in_nav”);
QWebElement prev_nav=e_nav.findFirst(“a”);
prev->setText(“http://hi.baidu.com”+prev_nav.attribute(“href”));
QWebElement next_nav=prev_nav.nextSibling();
next->setText(“http://hi.baidu.com”+next_nav.attribute(“href”));

有了前后文链接，要下载博客里所有文章就不是难事了。下面是我的例子代码和截图