Element Traversal Specification support in Opera Presto 2.12

W3C reference

W3C Element Traversal Specification

ElementTraversal interface

Opera Presto provides support for the W3C Element Traversal Specification. This interface allows script navigation of the elements of a DOM tree, excluding all other nodes in the DOM such as text nodes. It also provides attributes to expose the number of child elements of an element. This set of read-only attributes allows an author to easily navigate between elements in a document. In conforming implementations of Element Traversal, all objects that implement Element must also implement the ElementTraversal interface.

Four of the attributes,

• firstElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

each provide a live reference to another element with the defined relationship to the current element, if the related element exists.

The fifth attribute,

• childElementCount

exposes the number of child elements of an element, for preprocessing before navigation.

A conforming User Agent must implement all five attributes. A User Agent may implement similar interfaces in other specifications, but such implementation is not required for conformance to this specification, if the User Agent is designed for a minimal code footprint.

Opera Presto's support for the ElementTraversal interface and its attributes is described in the following data table.

Interface	Attribute	Description	Support
ElementTraversal
	firstElementChild	Returns the first child element node of this element. Returns null if this element has no child elements.	Yes
	lastElementChild	Returns the last child element node of this element. Returns null if this element has no child elements.	Yes
	previousElementSibling	Returns the previous sibling element node of this element. Returns null if this element has no element sibling nodes that come before this one in the document tree.	Yes
	nextElementSibling	Returns the next sibling element node of this element. Returns null if this element has no element sibling nodes that come after this one in the document tree.	Yes
	childElementCount	Returns the current number of element nodes that are children of this element. Returns 0 if this element has no child nodes that are of nodeType 1 (this is a code representing the type of the underlying object).	Yes

ECMAScript Language Binding

In a User Agent which implements the ElementTraversal interface, Element has all the properties and methods of Node and Element as defined in other DOM specifications, and in addition has the following properties.

Object	Property	Description	Support
Element
	firstElementChild	This read-only property is of type Element.	Yes
	lastElementChild	This read-only property is of type Element.	Yes
	previousElementSibling	This read-only property is of type Element.	Yes
	nextElementSibling	This read-only property is of type Element.	Yes
	childElementCount	This read-only property is of type Number.	Yes

Some examples

previousElementSibling

Demonstrating the utility of the previousElementSibling attribute

The following code example takes an element as a parameter, and returns the element's position in document order within its parent:

function findPosition( el ) {
   var pos = 0;

   // step through child elements in reverse order
   while ( null != el ) {
      // navigate to previous sibling
      el = el.previousElementSibling;
      pos++;
   }

   return pos;
}

childElementCount

Precalculating values and looping through elements

This example demonstrates the utility of the childElementCount attribute. The following code takes an element as a parameter, and places each of its children equidistantly according to the available space:

function spaceChildren( el ) {
   // get count of element nodes
   var elCount = el.childElementCount;

   var eachWidth = window.innerWidth / (elCount + 1);

   // get first child element
   var childEl = el.firstElementChild;

   // set initial position
   var nextPos = eachWidth/2;

   // step through child elements one by one
   while ( childEl ) {
      // position child
      childEl.style.setProperty( 'position', 'absolute', '' );
      childEl.style.setProperty( 'left', nextPos + 'px', '' );
      childEl.style.setProperty( 'width', eachWidth + 'px', '' );

      // increment position by width
      nextPos += eachWidth;

      // then navigate to next child element
      childEl = childEl.nextElementSibling;
   }
}

Other DOM support

DOM 2 Range and Traversal

Opera Presto supports DOM 2 Range, and supports DOM 2 Traversal with some exceptions.

DOM 3 Load and Save

Opera supports Load and Save, with some exceptions.

DOM 3 XPath

Opera supports DOM 3 XPath, with the same exceptions as with XSLT.

• This DOM specification is currently a W3C note.

window.btoa and window.atob

Opera supports window.btoa and window.atob for base64 encoding and decoding.

• See: window.btoa
• See: window.atob