Extended DOM objects with jQuery-like functionality. Create and transform, traversal and manipulation well-formed XML and HTML.

v1.3.1 2013-09-22 17:28 UTC


PHP version >= 5.3.6 extended DOM Objects via \DOMDocument::registerNodeClass with jQuery-like functionality:

  • volux\Dom\Html > volux\Dom\Document > \DOMDocument, volux\Dom\Attr > \DOMAttr, volux\Dom\Tag > volux\Dom\Element > \DOMElement, volux\Dom\Text > \DOMText, volux\Dom\Comment > \DOMComment, volux\Dom\Cdata > \DOMCdataSection;
  • volux\Dom\Table and volux\Dom\Form (with volux\Dom\Field) helpers;
  • extended \DOMXPath via volux\Dom\XPath with converting CSS selectors to XPath expression;
  • volux\Dom\Xslt class implement shadow load XSLT file or XSLT string (including from lambda function) and transformation with replacing target element;
  • wrapped DOMNodelist and DOMNamedNodeMap with volux\Set who implement \ArrayIterator and \RecursiveIterator interfaces.


volux\Dom Wiki


Add to your composer.json

    "require": {
        "volux/dom": "dev-master"

or copy src\volux to vendor directory and use your PRS-0 autoloader.

Parse external html example

use volux\Dom;

$htmlResult = new Dom\Html();

$htmlResult->title('Google News Test');

        ->each(function ($node, $index) use ($htmlResult) {
                    ->append('span')->text(($index + 1) . ': ')
                    ->append('a')->attr('href', $node->parent()->attr('href'))->text($node->text());

echo $htmlResult;

XSL transform example


use volux\Dom;


/* each tags with class="content" will be transformed and replaced */

Build form example

use volux\Dom;

$form = new Dom\Form();
    ->fieldSet('Group 1')
                ->dataList(array('Nike', 'Mike', 'Fred'))
            ->select(array('1'=>'One','2'=>'Two','3'=>'Three'), '2')
            ->label('Select item')
            ->input('0a0b0c0d', 'hidden')->name('token')
    ->fieldSet('Group 2')
            ->radio('choose', array('r'=>'Red', 'g'=>'Green', 'b'=>'Blue'))
            ->textarea('', array('name'=>'desc'))->label('Description')
                ->help('Input short description about it', 'help-block')
    ->checkbox('confirm', array('Confirm'))
            ->buttonSubmit('Send as GET')
                ->addClass('btn btn-primary')
            ->buttonSubmit('Send as POST')
                ->addClass('btn btn-success')

$html = new Dom\Html();
    ->root()->attr(array('lang' => 'en'));
    ->meta(array('charset' => Html::ENCODING))
    ->title('volux\Dom\Form Test')
        ->append('div')->attr('class', 'row')
            ->append('div')->attr('class', 'span4 offset1')
                ->append($form) /* point to add builded form to main html */

echo $html;

Build html complex example

use volux\Dom;

$html = new Dom\Html();
    ->root()->attr('lang', 'en');
    ->meta(array('charset' => 'utf-8'))
        'http-equiv' => 'X-UA-Compatible',
        'content'    => 'IE=edge,chrome=1',
        'name'    => 'viewport',
        'content' => 'user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1',
    ->title('volux\Dom\Html Test')

$navBarInner = $html
        ->a('header', array('class' => 'navbar navbar-fixed-top'))
            ->a('div', array('class' => 'navbar-inner'))
                ->a('a', array(
                        'class' => 'brand image',
                        'href'  => '/',
                        'title' => 'volux\Dom\Html Test')
                    ->append('<strong>volux\Dom\Html Test</strong>')
                ->a('ul', array('class' => 'nav'))
                    ->a('li', array('class' => 'divider-vertical'), false)

    ->addClass('some test content') /* for example */
    ->removeClass('test some') /* for example */
            ->attr('class', 'p3')
            ->append('1. Text with <em>entity</em> &copy;<br>and ')
                ->append('<a href="#"><i class="icon-2"> </i>valid xml </a>')
                ->append(' And<br>any more text.')
            ->append('Value with<br><span class=test>not valid xml');

echo $html;
* you can use $navBarInner for add some element later:
* for example $navBarInner->load($templateDir.'menu.html')
* or $navBarInner->a('ul', array('class' => 'nav'))
*     ->l('li', array(
*      	  array('>' => 'a', 'First', 'href' => '/item1'),
*      	  array('>' => 'a', 'Second', 'href' => '/item2'),
*     ));


<!DOCTYPE html>
<html lang="ru">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
        <title>volux\Dom\Html Test</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
        <link href="/css/app.css" rel="stylesheet">
        <header class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <a class="brand image" href="/" title="volux\Dom\Html Test"><strong>volux\Dom\Html Test</strong></a>
                <ul class="nav"><li class="divider-vertical"></li></ul>
        <div id="main" class="content">
            <h1>Value with<br><span class="test">not valid xml</span></h1>
            <p class="p3">1. Text with <em>entity</em> ©<br>and <a href="#"><i class="icon-2"> </i>valid xml </a>And<br>any more text.</p>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="/js/app.js"></script>


Implement most important & relevant functional in jQuery API Manipulation & Traversing sections:

  • .contents()
  • .css()
  • .detach()
  • .index()
  • .nextUntil()
  • .not()
  • .slice()
  • .toggleClass()
  • .wrapAll()
  • .wrapInner()
  • e.t.c.