Getting elements with namespaces

by Alessandro Vernet

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="results">
    <div id="by-tag-name-local">getElementsByTagName('child')</div>
    <div id="by-tag-name-prefix">getElementsByTagName('xxf:child')</div>
    <div id="by-tag-name-ns">getElementsByTagNameNS</div>
    <div id="with-jquery">jQuery's .children('prefix\\:localName')</div>
</div>

CSS

.results { display: inline-block; padding: 10px }
.results div  padding: 2px 5px;

JavaScript

var ns     = 'http://orbeon.org/oxf/xml/xforms';
var doc    = $.parseXML('<xxf:parent xmlns:xxf="' + ns + '"><xxf:child/></xxf:parent>');
var parent = doc.documentElement;

test('by-tag-name-local'  , parent.getElementsByTagName('child').length > 0);
test('by-tag-name-prefix' , parent.getElementsByTagName('xxf:child').length > 0);
test('by-tag-name-ns'     , parent.getElementsByTagNameNS &&
                            parent.getElementsByTagNameNS(ns, 'child').length > 0);
test('with-jquery'        , $(parent).children('xxf\\:child').is('*'));

console.log($(parent).find('child'));

function test(name, result) {
    $('#' + name).addClass('alert-' + (result ? 'success' : 'error'));
}