11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je cherche à ajouter un attribut titi à des liens possédant un attribut toto.
Le code suivant fonctionne bien à l'exception des éléments créés à la volée par un autre script javascript (que je ne peux pas modifier).


var liensAmodif = document.querySelectorAll('a[toto]');
for (var i = 0; i < liensAmodif.length; i++) {
       liensAmodif[i].setAttribute("titi","valeur");
}


Comment puis-je faire pour prendre également en compte les éléments dynamiques avec le code ci-dessus ?

Merci d'avance pour votre aide Smiley smile [/i]
Modifié par tom_sawyer (18 Sep 2013 - 11:17)
mettre ce code dans une fonction et la rappelée quand un nouvelle élément est crée. Ta variable "liensAmodif" n'est pas actualisé, c'est pour cela qu'il ne se passe rien.
Merci Zelalsan !

Je comprends qu'il s'agit d'un problème de timing, d'autant que ça fonctionne depuis la console de firebug. Du coup en suivant tes conseils j'ai tenté d'appeler la fonction avec body onload="modifLiens()" mais ça ne fonctionne toujours pas. Comment puis-je écouter la création de ces éléments ?
Modifié par tom_sawyer (18 Sep 2013 - 12:56)
Hello.

Il n'y a actuellement pas d'événements dans le DOM à la création d’éléments. Comme le disait Zelalsan, le mieux serait d'avoir la possibilité d'appeler ta fonction depuis celle qui créer les éléments, mais visiblement tu n'y a pas accès. Tu peux par contre la réécrire :
//Dans le fichier que tu ne peux pas modifier
function createLinks() {
    //On créer des liens
}

//Dans ton code
function modifyNode (node) {
    node.setAttribute('titi', 'toto');
}


function modifyAllLinks () {
    var links = document.getElementsByTagName('a'),
        i = 0;
    
    for (var i = 0; i < links.length; i++) {
       modifyNode(links[i]);
    }
}

//On garde une copie de la fonction
var oldCreateLinks = createLinks;

//On l'écrase
function createLinks () {
    //A supposer que l'ancien fonction ne prennent pas d'arguments, sinon ça devient un poil plus complexe
    oldCreateLinks();

    //Si jamais la fonction createLinks renvoie les nouveaux noeuds crées,
    //alors il vaut mieux utiliser directement modifyNode sur ceux-ci, pour des raisons de perfs
    modifyAllLinks();
}


[/i]