| <!doctype html> |
| <!-- Generated by FreeMarker/Docgen from DocBook --> |
| <html lang="en" class="page-type-section"> |
| <head prefix="og: http://ogp.me/ns#"> |
| <meta charset="utf-8"> |
| <title>The DOM tree - FreeMarker Manual</title> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="format-detection" content="telephone=no"> |
| <meta property="og:site_name" content="FreeMarker Manual"> |
| <meta property="og:title" content="The DOM tree"> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:url" content="http://example.com/xgui_expose_dom.html"> |
| <link rel="canonical" href="http://example.com/xgui_expose_dom.html"> |
| <link rel="icon" href="favicon.png" type="image/png"> |
| <link rel="stylesheet" type="text/css" href="docgen-resources/docgen.min.css?1594338519184"> |
| </head> |
| <body itemscope itemtype="https://schema.org/Code"> |
| <meta itemprop="url" content="http://example.com/"> |
| <meta itemprop="name" content="FreeMarker Manual"> |
| |
| <!--[if lte IE 9]> |
| <div style="background-color: #C00; color: #fff; padding: 12px 24px;">Please use a modern browser to view this website.</div> |
| <![endif]--><div class="header-top-bg"><div class="site-width header-top"><a class="logo" href="http://example.com" role="banner"> <img itemprop="image" src="logo.png" alt="My Logo"> |
| </a></div></div><div class="header-bottom-bg"><div class="site-width search-row"><a href="index.html" class="navigation-header">FreeMarker Manual</a><div class="navigation-header"></div></div><div class="site-width breadcrumb-row"><ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"><li class="step-0" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="index.html"><span itemprop="name">FreeMarker Manual</span></a></li><li class="step-1" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="xgui.html"><span itemprop="name">XML Processing Guide</span></a></li><li class="step-2" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="xgui_expose.html"><span itemprop="name">Exposing XML documents</span></a></li><li class="step-3" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="xgui_expose_dom.html"><span itemprop="name">The DOM tree</span></a></li></ul><div class="bookmarks" title="Bookmarks"><span class="sr-only">Bookmarks:</span><ul class="bookmark-list"><li><a href="alphaidx.html">Index</a></li><li><a href="gloss.html">Glossary</a></li><li><a href="ref.html">Reference</a></li><li><a href="app_faq.html">FAQ</a></li><li><a href="preface.html#test_target">Bőregér</a></li><li><a href="api/index.html">API</a></li><li><a href="../index.html">Home</a></li></ul></div></div></div> <div class="main-content site-width"> |
| <div class="content-wrapper"> |
| <div id="table-of-contents-wrapper" class="col-left"> |
| <script>var breadcrumb = ["FreeMarker Manual","XML Processing Guide","Exposing XML documents","The DOM tree"];</script> |
| <script src="toc.js?1594338519184"></script> |
| <script src="docgen-resources/main.min.js?1594338519184"></script> |
| </div> |
| <div class="col-right"><div class="page-content"><div class="page-title"><div class="pagers top"><a class="paging-arrow previous" href="xgui_expose.html"><span>Previous</span></a><a class="paging-arrow next" href="xgui_expose_put.html"><span>Next</span></a></div><div class="title-wrapper"> |
| <h1 class="content-header header-section1" id="xgui_expose_dom" itemprop="headline">The DOM tree</h1> |
| </div></div><p>We will use this XML document for the examples:</p><a name="misc.example.bookXml"></a> |
| |
| <div class="code-wrapper"><pre class="code-block code-unspecified"><book> |
| <title>Test Book</title> |
| <chapter> |
| <title>Ch1</title> |
| <para>p1.1</para> |
| <para>p1.2</para> |
| <para>p1.3</para> |
| </chapter> |
| <chapter> |
| <title>Ch2</title> |
| <para>p2.1</para> |
| <para>p2.2</para> |
| </chapter> |
| </book></pre></div><p>W3C DOM models an XML document as a tree of nodes. The node tree |
| of the above XML can be visualized as:</p> |
| |
| <div class="code-wrapper"><pre class="code-block code-unspecified">document |
| | |
| +- element book |
| | |
| +- text "\n " |
| | |
| +- element title |
| | | |
| | +- text "Test Book" |
| | |
| +- text "\n " |
| | |
| +- element chapter |
| | | |
| | +- text "\n " |
| | | |
| | +- element title |
| | | | |
| | | +- text "Ch1" |
| | | |
| | +- text "\n " |
| | | |
| | +- element para |
| | | | |
| | | +- text "p1.1" |
| | | |
| | +- text "\n " |
| | | |
| | +- element para |
| | | | |
| | | +- text "p1.2" |
| | | |
| | +- text "\n " |
| | | |
| | +- element para |
| | | |
| | +- text "p1.3" |
| | |
| +- element |
| | |
| +- text "\n " |
| | |
| +- element title |
| | | |
| | +- text "Ch2" |
| | |
| +- text "\n " |
| | |
| +- element para |
| | | |
| | +- text "p2.1" |
| | |
| +- text "\n " |
| | |
| +- element para |
| | |
| +- text "p2.2"</pre></div><p>Note that the disturbing <code class="inline-code">"\n "</code>-s are the |
| line-breaks (indicated here with <code class="inline-code">\n</code>, an escape |
| sequence used in FTL string literals) and the indentation spaces |
| between the tags.</p><p>Notes on the DOM related terminology:</p><ul> |
| <li> |
| <p>The topmost node of a tree is called the <strong>root</strong>. In the case of XML documents, it is |
| always the ``document'' node, and not the top-most element |
| (<code class="inline-code">book</code> in this example).</p> |
| </li> |
| |
| <li> |
| <p>We say that node B is the <strong>child</strong> of node A, if B is the |
| <em>immediate</em> descendant of A. For example, the |
| two <code class="inline-code">chapter</code> element nodes are the children of |
| the <code class="inline-code">book</code> element node, but the |
| <code class="inline-code">para</code> element nodes are not.</p> |
| </li> |
| |
| <li> |
| <p>We say that node A is the <strong>parent</strong> of node B, if A is the |
| <em>immediate</em> ascendant of node B, that is, if B |
| is the children of A. For example, the <code class="inline-code">book</code> |
| element node is the parent of the two <code class="inline-code">chapter</code> |
| element nodes, but it is not the parent of the |
| <code class="inline-code">para</code> element nodes.</p> |
| </li> |
| |
| <li> |
| <p>There are several kind of components that can occur in XML |
| documents, such as elements, text, comments, processing |
| instructions, etc. All such components are nodes in the DOM tree, |
| so there are element nodes, text nodes, comment nodes, etc. In |
| principle, the attributes of elements are also nodes in the tree |
| -- they are the children of the element --, but still, usually we |
| (and other XML related technologies) exclude them of element |
| children. So basically they don't count as children nodes.</p> |
| </li> |
| </ul><p>The programmer drops the document node of the DOM tree into the |
| FreeMarker data-model, and then the template author can walk the DOM |
| tree using that variable as the starting-point.</p><p>The DOM nodes in FTL correspond to <strong>node |
| variables</strong>. This is a variable type, similarly to type |
| string, number, hash, etc. Node variable type makes it possible for |
| FreeMarker to get the parent node and the child nodes of a node. This |
| is technically required to allow the template author to navigate |
| between the nodes, say, to use the <a href="ref_builtins_node.html">node built-ins</a> or the <a href="ref_directive_visit.html#ref.directive.visit"><code>visit</code></a> and |
| <a href="ref_directive_visit.html#ref.directive.recurse"><code>recurse</code></a> |
| directives; we will show the usage of these in the further |
| chapters.</p><div class="bottom-pagers-wrapper"><div class="pagers bottom"><a class="paging-arrow previous" href="xgui_expose.html"><span>Previous</span></a><a class="paging-arrow next" href="xgui_expose_put.html"><span>Next</span></a></div></div></div></div> </div> |
| </div> |
| <div class="site-footer"><div class="site-width"><div class="footer-top"><div class="col-left sitemap"></div><div class="col-right"><a class="xxe" href="http://www.xmlmind.com/xmleditor/" rel="nofollow" title="Edited with XMLMind XML Editor"><span>Edited with XMLMind XML Editor</span></a></div></div><div class="footer-bottom"> <p class="last-generated"> |
| Last generated: |
| <time itemprop="dateModified" datetime="2020-07-09T23:48:39Z" title="Thursday, July 9, 2020 11:48:39 PM GMT">2020-07-09 23:48:39 GMT</time> </p> |
| <p class="copyright"> |
| © <span itemprop="copyrightYear">1999</span>–2020 |
| <a itemtype="http://schema.org/Organization" itemprop="copyrightHolder" href="https://apache.org/">The Apache Software Foundation</a> </p> |
| </div></div></div></body> |
| </html> |
