DOM Traversal Example

Window Class Implementation

In the Window class constructor, we call the setupUi() function to set up the user interface described in the window.ui file:

 Window::Window(QWidget *parent)
     : QMainWindow(parent)
 {
     setupUi(this);
 }

When the Web page is loaded, the on_webView_loadFinished() slot is called. Here, we clear the tree widget and begin inspection of the document by obtaining the document element from the page's main frame:

 void Window::on_webView_loadFinished()
 {
     treeWidget->clear();

     QWebFrame *frame = webView->page()->mainFrame();
     QWebElement document = frame->documentElement();

     examineChildElements(document, treeWidget->invisibleRootItem());
 }

At this point, we call the examineChildElements() function to traverse the document, starting with the child elements of the document element for which we will create top level items in the tree widget.

The examineChildElements() function accepts a parent element and a parent item. Starting with the first child element, which we obtain with the element's firstChild() function, we examine each child element of the parent item. For each valid (non-null) element, which we check by calling its isNull() function, we create a new QTreeWidgetItem instance with the element name and add it to the parent item.

 void Window::examineChildElements(const QWebElement &parentElement,
                                   QTreeWidgetItem *parentItem)
 {
     QWebElement element = parentElement.firstChild();
     while (!element.isNull()) {

         QTreeWidgetItem *item = new QTreeWidgetItem();
         item->setText(0, element.tagName());
         parentItem->addChild(item);

         examineChildElements(element, item);

         element = element.nextSibling();
     }
 }

We recursively examine the child elements for each element by calling examineChildElements() with the current child element and the newly-created item. To obtain the next element at the same level in the document, we call its nextSibling() function.

This recursive approach to reading the document makes it easy to create a simple representation of the document structure in a tree widget.

For completeness, we show the setUrl() function, which is provided to allow the document URL to be set from the example's main() function.

 void Window::setUrl(const QUrl &url)
 {
     webView->setUrl(url);
 }

 #include <QtGui>
 #include "window.h"

 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);
     Window window;
     window.setUrl(QUrl("http://www.webkit.org"));
     window.show();
     return app.exec();
 }