Comment manipuler le DOM - le code source via jQuery et Google Tag Manager

​Dans certains cas, nous avons besoin de changer le contenu de la page. Ce sont des manipulation du DOM. On peut en avoir besoin pour faire de la personnalisation de contenu ou du SEO.

Le but est de cibler le noeud à modifier avec un sélecteur CSS et de le réécrire. Ca peut être du texte ou l'image ou tout autre élément.

Dans la développer console de Chrome, testez votre sélecteur CSS.

exemple sur la page vendeur de Letzshop - https://letzshop.lu/fr/vendors

var elements = document.querySelectorAll('a.h6');
console.dir(elements);

Cette ligne code vous permet de voir le nombre d'objets sélectionnés et en les dépliant, vous avez accès à tout ce que vous pouvez modifier (href, innerText, title, class, ...)

Pour effectuer la modification, faites une boucle sur "elements" et changer ce que vous souhaitez.

var elements = document.querySelectorAll('a.h6');
console.dir(elements)
for(i=0;i<elements.length;i++){
       var a = elements[i].innerText
        elements[i].innerText = a.split('').reverse().join('') + " "
}

Le code est à écrire dans une balise de type HTML personnalisé et a exécuté en DOM ready.

Pour des images, c'est le même chose

var elements = document.querySelectorAll('img.vd-Tile_ImageTag');
console.dir(elements)

for(i=0;i<elements.length;i++){
       elements[i].src = 'https://loremflickr.com/525/329/simpson?param='+i;
}

Dans certains cas, vous souhaiterez ajouter une ligne

var elements = document.querySelectorAll('a.h6');
console.dir(elements)
for(i=0;i<elements.length;i++){
         var node = document.createElement("p");
         var textnode = document.createTextNode("Achetez chez "+elements[i].title);
         node.appendChild(textnode);
         elements[i].appendChild(node);
}

Voici la doc pour le javaScript - https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents ou en jQuery https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents

Vous pouvez faire ces modifications en javascript ou avec jQuery. jQuery est très adapté pour manipuler le DOM.