jquery.superdom

Latest Release - Documentation - Issues

jQuery plugin for DOM operations in non-XHTML namespaces.

Why?

Now that SVG is part of HTML5, our code often contains DOM nodes from different namespaces. For example, sometimes an <a> tag is an HTMLAnchorElement, but it could be an SVGAElement.

jQuery is an excellent library for manipulating DOM nodes, but SVG is on the wontfix list. Also, I wanted to extend jQuery rather than rewrite it (like SVG DOM).

Usage

Select and manipulate DOM nodes:

$('circle')
  .addClass('test test2')
  .attr({cx: 10, cy: 50});

Create DOM nodes in other namespaces:

$('<svg:text/>')
    .text('content')
    .appendTo($('body svg'));

$('body svg').append('<svg:text>content</svg:text>');

Extend SuperDOM to understand new namespaces:

$.extend($.ns, {math: 'http://www.w3.org/1998/Math/MathML'});
$('<math:mrow>a &#x02062; <math:msup><math:mi>x</math:mi>' +
  '<math:mn>2</math:mn></math:msup> + b</math:mrow>').find('mn')

Select nodes by namespace and check if a node is in a namespace:

$('a:ns(svg)');
$('a:ns(http://www.w3.org/2000/svg)');
$('text').hasNS('svg');

Read more in the documentation.

Influenced By

• SVG DOM by Keith Wood (more of a jQuery re-write)
• SVG function function by Ben Olson (only creates SVG nodes)

License

Licensed under the MIT License.