From HaFrWiki
Jump to: navigation, search

The Document Object Model (DOM) is a programming API for HTML and XML documents defining the logical structure.

XPath (XML Path Language) is based on a tree representation of the XML/HTML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria.


The Document Object Model or DOM in combination with XPath are powerful/useful tools for screen scraping, programming and data manipulation (and much more). Unfortunately all the features are less known, often poorly documented and with very little tutorials.

Also the DOM and XPath can be used in PHP and in Javascript or better on the server and in the client-browser.

One should keep the following points in mind, while working with XPath:

  • XPath is core component of XSLT standard.
  • XSLT cannot work without XPath.
  • XPath is basis of XQuery and XPointer.

Structuring XML and HTML

DOM Nodes

According to the W3C HTML DOM standard, everything in an HTML document is a node:

  • The entire document is a document node,
  • Every HTML element is an element node,
  • The text inside HTML elements are text nodes,
  • Every HTML attribute is an attribute node (deprecated),
  • All comments are comment nodes,

Node Relations

Node Relations

The nodes in the node tree have a hierarchical relationship to each other which have to be defined clearly:

  • Root : the top node of the tree,
  • Parent : every node has exactly one parent except the root, which has no parent,
  • Child : A node can have a number of children,
  • Sibling : Siblings (brothers or sisters) are nodes with the same parent.
From the HTML on the right you can read
  • html is the root node,
  • html has no parents,
  • html is the parent of head and body,
  • head is the first child of html,
  • body is the last child of html,
  • head has one child: title
  • title has one child (a text node): "DOM Tutorial"
  • body has two children: h1 and p
  • h1 has one child: "DOM Lesson one"
  • p has one child: "Hello world!"
  • h1 and p are siblings
Use the following node properties to navigate between nodes
  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling


The nodeName property specifies the name of a node.

  • nodeName is read-only
  • nodeName of an element node is the same as the tag name,
  • nodeName of an attribute node is the attribute name
  • nodeName of a text node is always #text,
  • nodeName of the document node is always #document.


The nodeValue property specifies the value of a node.

  • nodeValue for element nodes is null,
  • nodeValue for text nodes is the text itself,
  • nodeValue for attribute nodes is the attribute value.


The nodeType property

  • nodeType is read only.
  • nodeType is the type of a node.

The most important nodeType properties are:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>
  1. Remark: Type 2 is deprecated in the HTML DOM (but works). It is not deprecated in the XML DOM.
  2. See the full list:

XPath syntax

Tutorials on xpath made by the Website ZVON [1][2][3].

Syntax Description Example catch Links
/ Child: Absolute path to the required element. /AAA => <AAA>
// Descedents: All elements which fulfill following criteria are selected. //BBB => <BBB/> on 2, 4, 5, 7
. Indicates the current context.    
.. Indicates the parent of the current context.    
: Namespace separator.    
() Groups operations to explicitly establish precedence.    
* Collect: selects all elements located by preceding path. /AAA/DDD/* => 7. <BBB/> after <DDD>
[] Filter: A number in the brackets gives the position of the element in the selected set. [last()] specifies the last element. /AAA/BBB[1] => <BBB/> on 2.
@ Attribute: Specifies an attribute.
@attrib='xx' Specifies the value of an attribute.
count() Number of selected elements.
@name()='xx' Gets the name of the element. Extra start-with and contains.
string-length Specifies the string length of the element name. //*[string-length(name()) = 3] => all elements.
| Union: Implements the 'or' into XPath. //AAA|//BBB
child Children of the context node. The child axis is the default axis and it can be omitted. //child::AAA => <AAA> </AAA>,
descedent Descedents of the context node; a descendant is a child or a child of a child and so on; /DDD/descedent => <BBB/>
ancestor::*   //BBB[position() mod 2 = 0 ]


 1 <AAA>
 2   <BBB/>
 3   <CCC/>
 4   <BBB/>
 5   <BBB/>
 6   <DDD>
 7     <BBB/>
 8   </DDD>
 9   <CCC/>
10 </AAA> 

DOM Overview


See also


  • Riptutoral, Learning XPath (XPath.pdf) is an excellent free eBook-tutorial without the XML explanations, so solely on XPath.
  •, XPath CheatSheet contains useful examples for XPath queries.



  1., Tutorials by Example on HTML, CSS, XPath, XML, Schemas and much more.
  2. ZVON XPath Tutorial, XPath Tutorial by Example.
  3. Infocenter Sybase XPath operator and functions