<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="../../../_utils/schema/yaps.rnc" type="application/relax-ng-compact-syntax"?>
<?xml-model href="../../../_utils/schema/yaps.isosch" type="application/xml" schematypens="http://purl.oclc.org/dsdl/schematron"?>
<?xml-stylesheet type="text/xsl" href="yaps2slidy1.xslt"?>
<!-- $Id: xpath_intro_plus.xml 51709 2026-05-28 23:29:13Z syd $ -->
<TEI xmlns="http://www.wwp.northeastern.edu/ns/yaps" version="5.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Navigating the Tree</title>
        <author>Julia Flanders and Syd Bauman</author>
      </titleStmt>
      <editionStmt>
        <edition>DHSI 2017, University of Victoria</edition>
      </editionStmt>
      <publicationStmt>
        <distributor>Women Writers Project (via website)</distributor>
        <address>
          <addrLine>url:mailto:wwp@northeastern.edu</addrLine>
        </address>
        <date when="2017-06-13"/>
        <availability status="restricted">
          <p>Copyright 2012 Syd Bauman, Julia Flanders, and the Women Writers Project</p>
          <p>This TEI-encoded XML file is available under the terms of
          the <ref target="http://creativecommons.org/licenses/by-sa/3.0/">Creative
          Commons Attribution-ShareAlike 3.0 (Unported)</ref>
          license.</p>
        </availability>
        <pubPlace>Providence, RI  USA</pubPlace>
      </publicationStmt>
      <sourceDesc>
        <p>A gentle introduction to XPath patterns</p>
      </sourceDesc>
    </fileDesc>
    <revisionDesc>
      <change who="#sbauman.emt" when="2013-05-04">Per advice David
      Birnbaum, add <title>XML representations</title> at the
      beginning and the <soCalled>XML Butterfly</soCalled> at the end</change>
      <change who="#jflanders.lfw" when="2012-11-29">Created file from scratch</change>
    </revisionDesc>
  </teiHeader>
  <text>
    <presentation>

      <section>
        <head>XML representations</head>
        <slide>
          <table>
            <row>
              <cell rend="css(vertical-align: top;)">
                <egMarkup scheme="TEI" type="valid" xmldecl="true">
                  <book>
                    <introduction>Blah blah blah ... </introduction>
                    <chapter>
                      <heading>Wines</heading>
                      <section>White wines ... </section>
                      <section>Red wines ... </section>
                    </chapter>
                    <chapter>
                      <heading>Beers</heading>
                      <section>Ales ... </section>
                      <section>Lagers ... </section>
                    </chapter>
                    <index> stuff ... </index>
                  </book>
                </egMarkup>
              </cell>
              <cell rend="css(padding: 0ex 1ex 1ex 1ex; vertical-align: top;)">
                <figure>
                  <graphic url="../../../_utils/gfx/boxes_book2.png" width="100%"/>
                  <figDesc>Classic boxes-inside-boxes representation
                  of a mythical book that contains an introduction,
                  two chapters, and an index, where each chapter
                  contains a heading and two sections</figDesc>
                </figure>
              </cell>
              <cell rend="css(vertical-align: top;)">
                <figure>
                  <graphic url="../../../_utils/gfx/tree_book1.png" width="100%"/>
                  <figDesc>Classic tree representation of a mythical
                  book that contains an introduction, two chapters,
                  and an index, where each chapter contains a heading
                  and two sections</figDesc>
                </figure>
              </cell>
            </row>
          </table>
        </slide>
      </section>

      <section>
        <head>Identifying the element to match: simple identification</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic2.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>We've already seen examples of the simple case where we
          name an element in the value of <att>match</att>, and
          thereby we identify an element to be processed; here we say
          "please match the TEI element"</p>
          <p>We're not talking here about the flow of the stylesheet:
          we're just saying "when my turn comes, if there's a XX, I
          match it..."</p>
        </lectureNote>
        <tutorial>
          <p>We've already seen examples of the simple case where we
          name an element in the value of <att>match</att>, and
          thereby we identify an element to be processed; here we say
          "please match the TEI element"</p>
          <p>We're not talking here about the flow of the stylesheet:
          we're just saying "when my turn comes, if there's a XX, I
          match it..."</p>
        </tutorial>
      </section>

      <section>
        <head>Identifying the element to match: multiples</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic3.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>Here's an example where naming an element actually
          identifies multiple instances of that element: in this case,
          all the <gi>div</gi> elements in the document</p>
          <p>We can also specify multiple different elements that we
          want to target; the or-bar means "this or that", "head or
          opener"</p>
        </lectureNote>
        <tutorial>
          <p>Here's an example where naming an element actually
          identifies multiple instances of that element: in this case,
          all the <gi>div</gi> elements in the document</p>
          <p>We can also specify multiple different elements that we
          want to target; the or-bar means "this or that", "head or
          opener"</p>
        </tutorial>
      </section>

      <section>
        <head>Identifying the element to match: context</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic4.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>And we can also specify particular contexts we're
          interested in: for instance, only the <gi>div</gi> elements
          that appear within <gi>front</gi></p>
        </lectureNote>
        <tutorial>
          <p>And we can also specify particular contexts we're
          interested in: for instance, only the <gi>div</gi> elements
          that appear within <gi>front</gi></p>
        </tutorial>
      </section>

      <section>
        <head>Some other useful patterns: attribute values, order of siblings</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic5.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>We can also select contexts based on particular attribute
          values (similar to CSS selectors): basically saying "I'm
          looking at all the divs, and of those I only want the ones
          that have this attribute, and this value"</p>
          <p>Also based on which sibling we are talking about: e.g. we
          only want the first <gi>p</gi> child in a given context.</p>
        </lectureNote>
        <tutorial>
          <p>We can also select contexts based on particular attribute
          values (similar to CSS selectors): basically saying "I'm
          looking at all the divs, and of those I only want the ones
          that have this attribute, and this value"</p>
          <p>Also based on which sibling we are talking about: e.g. we
          only want the first <gi>p</gi> child in a given context.</p>
        </tutorial>
      </section>

      <section>
        <head>How to suppress parts of the input tree</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic6.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>We can also suppress whole branches of the input tree,
          basically telling the XSLT processor to ignore them</p>
          <p>We do this by providing a template that matches the
          parent element for that branch, but with no "apply
          templates" instruction</p>
        </lectureNote>
        <tutorial>
          <p>We can also suppress whole branches of the input tree,
          basically telling the XSLT processor to ignore them</p>
          <p>We do this by providing a template that matches the
          parent element for that branch, but with no "apply
          templates" instruction</p>
        </tutorial>
      </section>
      
      <section>
        <head>More complex navigation: the context node</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic7.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>We've been doing some simple navigation so far, basically
          ignoring the question of where exactly we are in the
          tree</p>
          <p>However, to do more complex navigation and selection of
          nodes for processing, we have to have a more complex
          understanding of how we navigate, which involves knowing
          where the XSLT processor thinks we are (and hence, how to
          get to where we want to go <emph>from there</emph>)</p>
          <p>In an XSLT template, when we match an element, whatever
          else happens inside that template happens relative to the
          location of that element (i.e. the matched element in the
          input tree); that element is "the context node".</p>
          <p>So for instance in this example, our template is
          selecting <gi>div</gi> as the context node, and as a result
          the <gi>p</gi> elements identified by the <att>select</att>
          attribute are limited to those within the context node: the
          <gi>p</gi> children of the context node</p>
        </lectureNote>
        <tutorial>
          <p>We've been doing some simple navigation so far, basically
          ignoring the question of where exactly we are in the
          tree</p>
          <p>However, to do more complex navigation and selection of
          nodes for processing, we have to have a more complex
          understanding of how we navigate, which involves knowing
          where the XSLT processor thinks we are (and hence, how to
          get to where we want to go <emph>from there</emph>)</p>
          <p>In an XSLT template, when we match an element, whatever
          else happens inside that template happens relative to the
          location of that element (i.e. the matched element in the
          input tree); that element is "the context node".</p>
          <p>So for instance in this example, our template is
          selecting <gi>div</gi> as the context node, and as a result
          the <gi>p</gi> elements identified by the <att>select</att>
          attribute are limited to those within the context node: the
          <gi>p</gi> children of the context node</p>
        </tutorial>
      </section>
      
      <section>
        <head>Navigating from the root of the tree</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic7a.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>If we want to navigate from the root, rather than
          relative to our current position, start the expression with
          a slash</p>
        </lectureNote>
        <tutorial>
          <p>If we want to navigate from the root, rather than
          relative to our current position, start the expression with
          a slash</p>
        </tutorial>
      </section>
      
      <section>
        <head>Parents, ancestors, descendants, and children</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic8.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>So far we've just been navigating down the tree in a very
          simple way: all of our matches and selections thus far have
          been done using just the element name. It's time to gloss
          this notation in a bit more detail: an element name X (used
          on the <att>select</att> attribute, all by itself, means
          "the X children of the context node", "my X children"</p>
          <p>If we want the descendants, not just the children,
          there's another notation: //</p>
          <p>And if we want parents, there's another notation ../</p>
          <p>And if we want ancestors, there's another (more verbose)
          notation</p>
        </lectureNote>
        <tutorial>
          <p>So far we've just been navigating down the tree in a very
          simple way: all of our matches and selections thus far have
          been done using just the element name. It's time to gloss
          this notation in a bit more detail: an element name X (used
          on the <att>select</att> attribute, all by itself, means
          "the X children of the context node", "my X children"</p>
          <p>If we want the descendants, not just the children,
          there's another notation: //</p>
          <p>And if we want parents, there's another notation ../</p>
          <p>And if we want ancestors, there's another (more verbose)
          notation</p>
        </tutorial>
      </section>
      
      <section>
        <head>Following and preceding nodes</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic9.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>The idea of parents and ancestors, children and
          descendants, takes us up and down the tree; we can think of
          these relationships as traversing <term>axes</term> that
          radiate out from the context node</p>
          <p>We can also go across the tree along horizontal axes: to
          identify <emph>preceding</emph> and <emph>following</emph>
          nodes</p>
          <p>A simple case: the following sibling...</p>
        </lectureNote>
        <tutorial>
          <p>The idea of parents and ancestors, children and
          descendants, takes us up and down the tree; we can think of
          these relationships as traversing <term>axes</term> that
          radiate out from the context node</p>
          <p>We can also go across the tree along horizontal axes: to
          identify <emph>preceding</emph> and <emph>following</emph>
          nodes</p>
          <p>A simple case: the following sibling...</p>
        </tutorial>
      </section>
      <section>
        <head>Following and preceding nodes, more</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic10.png"/>
          </figure>
        </slide>
        <lectureNote>
          <p>The more general case of "following" nodes are a little
          trickier because you have to remember that an element's
          child doesn't "follow" it. To find "following" elements you
          have to go up one level, to the parent, as in this example:
          the "following" <gi>div</gi> elements are those that are
          children of any following siblings of the context node.</p>
        </lectureNote>
        <tutorial>
          <p>The more general case of "following" nodes are a little
          trickier because you have to remember that an element's
          child doesn't "follow" it. To find "following" elements you
          have to go up one level, to the parent, as in this example:
          the "following" <gi>div</gi> elements are those that are
          children of any following siblings of the context node.</p>
        </tutorial>
      </section>

      <section>
        <head>Axes</head>
        <slide>
          <figure>
            <graphic height="600px" url="../../../_utils/gfx/xpath_basic11.png"/>
          </figure>
          <p>For reference, <ref target="../../handouts/xpath_cribsheet.xhtml">a cribsheet for XPath</ref></p>
        </slide>
        <lectureNote>          
          <p>Let's take a step back and look at the axes
          themselves</p>
          <p>For reference, <ref target="../../handouts/xpath_cribsheet.xhtml">a cribsheet
          for XPath</ref></p>
        </lectureNote>
        <tutorial>          
          <p>Let's take a step back and look at the axes
          themselves</p>
          <p>For reference, <ref target="../../handouts/xpath_cribsheet.xhtml">a cribsheet
          for XPath</ref></p>
        </tutorial>
      </section>

      <section>
        <head>axes <code>:-)</code></head>
        <slide>
          <figure>
            <graphic url="../../../_utils/gfx/xpath_axes_labeled.png"/>
            <figDesc>another view of axes</figDesc>
          </figure>
        </slide>
      </section>
      
    </presentation>
  </text>
</TEI>
