jQuery non è concepito per funzionare al meglio con documenti XML. In particolare gli attributi di dati HTML5 potrebbero essere resi compatibili con XML a patto di sfruttare le caratteristiche di questo standard.
Possiamo utilizzare i namespace per il nostro scopo
<?xml version="1.0" encoding="utf-8" ?>
<document xmlns="http://www.w3.org/1999/xhtml" xmlns:data="http://site.com/ns/data">
<ul>
<li>Test</li>
<li>Test</li>
<li><data:action type="click" message="Test">Test</data:action></li>
</ul>
<!-- JavaScript qui -->
</document>
Il namespace XHTML è stato inserito al solo scopo di permettere ai browser di riconoscere gli elementi standard HTML/XHTML. La sola eccezione riguarda
il nostro elemento data che appartiene al namespace data. Tale elemento ha gli attributi type e
message che verranno usati da jQuery per associare un evento all'elemento:
(function($) {
$.xmldata = function(element, options) {
options = $.extend({
callback: function() {}
},
options);
var message = element.getAttribute('message');
var type = element.getAttribute('type');
element.addEventListener(type, function() {
options.callback(message);
}, false);
};
})(jQuery);
Il DOM XML è diverso da quello HTML: l'elemento data:action è costituito dal prefisso del namespace
(data) e dal nome locale dell'elemento (action):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="xmldata.js"></script>
<script type="text/javascript">
<![CDATA[
document.addEventListener('DOMContentLoaded',
function() {
var list = document.getElementsByTagName('ul')[0];
var action = list.getElementsByTagNameNS('http://site.com/ns/data', 'action')[0];
$.xmldata(action, {
callback: function(msg) {
alert(msg);
}
});
});
]]>
</script>
Come si può notare, utilizzando i namespace possiamo aggiungere la stessa funzionalità anche a documenti XML.