pilgrim[.maleo.net]

Dans la lignée du Top 10 custom JavaScript functions of all time de Dustin Diaz, voici quelques fonctions DOM qui me servent de temps en temps.

getPreviousSiblingByTagName() et getNextSiblingByTagName()

function getPreviousSiblingByTagName( node, tag ) {

    var sibling = node.previousSibling;
    if ( sibling == null ) return null;
    if ( sibling.nodeName == tag.toUpperCase() ) return sibling;
    else return getPreviousSiblingByTagName(sibling, tag);

} // end of 'getPreviousSiblingByTagName()'


function getNextSiblingByTagName( node, tag ) {

    var sibling = node.nextSibling;
    if ( sibling == null ) return null;
    if ( sibling.nodeName == tag.toUpperCase() ) return sibling;
    else return getNextSiblingByTagName(sibling, tag);

} // end of 'getNextSiblingByTagName()'

Ces deux fonctions permettent de retrouver ou tester l'élément précédent ou suivant un élément donné via son nom de balise :

// On détermine si un élément LI est le premier enfant de la liste
if ( null == getPreviousSiblingByTagName('li') ) alert('premier élément de la liste');

L'utilisation de ce type de code peut paraître inutile mais si l'on considère le code HTML suivant, il n'en est rien :

<ul>
    <li>premier élément</li>
    <li>deuxième élément</li>
</ul>

Dans l'arbre DOM de bout de code, l'élement précédent de même niveau que le premier <li> de la liste n'est pas null mais un noeud de type texte : le retour chariot et le ou les caractères de tabulation ; l'utilisation de la simple méthode previousSibling() ne retournerait donc pas le résultat escompté. Pour être sûr d'avoir le bon résultat dans ce cas, il faudrait écrire notre code précédent comme suit :

<ul><li>premier élément</li><li>deuxième élément</li></ul>

getAncestorByTagName()

function getAncestorByTagName( node, tag ) {

    var ancestor = node.parentNode;
    if ( ancestor == null ) return null;
    if ( ancestor.nodeName == tag.toUpperCase() ) return ancestor;
    else return getAncestorByTagName(ancestor, tag);

} // end of 'getAncestorByTagName()'

Cette fonction, quant à elle, permet de retrouver le premier élément parent d'un élément donné via son nom de balise :

<ul class="myclass">
    <li><a href="#" id="test">premier élément</a></li>
    <li>deuxième élément</li>
</ul>

var test = document.getElementById('test');
alert(getAncestorByTagName(test, 'ul').className; // affiche 'myclass'

Encore une fois, n'hésitez pas à faire par de vos remarques :)