Techniques de manipulation DOM en JavaScript

// Récupérer l'index de l'élément à supprimer
var parentElement
if(window.navigator.userAgent.indexOf("MSIE")>0){
    // Navigateurs avec noyau IE (pour IE8 et inférieurs)
    parentElement = document.getElementById(image_id).parentElement;
}else{
    // Navigateurs avec noyau W3C
    parentElement = document.getElementById(image_id).parentNode;
}
var element_index = 0;
// Si des éléments existent avant l'élément courant, incrémenter l'index
while((parentElement = parentElement.previousSibling) != null){
    element_index++;
}

// Supprimer le chemin d'image correspondant dans le tableau
tableauDonnees.splice(element_index, 1);

// Supprimer l'élément div correspondant dans la liste container
var listeContainer = document.getElementById('container');
// Vérifier si l'index est valide
if (element_index >= 0 && element_index < listeContainer.childNodes.length) {
    listeContainer.removeChild(listeContainer.childNodes[element_index]);
}

Insertion d'un élément avant le premier enfant de la liste

var conteneur = document.getElementById('container');
var nouvelElement = document.createElement("div");
var image_id = "img" + Math.random().toString(36).substring(2);
nouvelElement.setAttribute("style", "float:left");
nouvelElement.innerHTML = "<img class="image" height="85px" id="" + image_id + "" src="" + "data:image/jpg;base64," + cheminImage + "" style="margin: 0 3px" width="105px"></img>";
if(conteneur.childNodes.length > 0){
    // Ajout en ordre inverse pour l'aperçu
    conteneur.insertBefore(nouvelElement, conteneur.children[0]);
} else {
    conteneur.appendChild(nouvelElement);
}

Empêcher le glissement d'images

.image{
    -webkit-user-drag: none;
}

Empêcher le glissement des liens

// Bloquer le glissement des balises <a>
$("body").on("mousedown", "a", function (e) {
    e.preventDefault();
});
</a>

Accès aux éléments parents

// Accès aux éléments parents (ici parent du parent)
var elementParent
if(window.navigator.userAgent.indexOf("MSIE")>0){
    // Navigateurs avec noyau IE
    elementParent = element.parentElement.parentElement;
}else{
    // Navigateurs avec noyau W3C
    elementParent = element.parentNode.parentNode;
}

Suppression de valeurs de tableau par filtrage

// Suppression d'un élément div de la liste container
var listeContainer = document.getElementById('container');
// Vérifier si l'index est valide
if (element_index >= 0 && element_index < listeContainer.childNodes.length) {
    var divImage = listeContainer.childNodes[element_index]
    // Récupérer le code base64 de l'image pour suppression (premier élément du div)
    var sourceBase64 = divImage.firstElementChild.src;
    var elementBase64 = sourceBase64.split("data:image/jpg;base64,")[1]
    tableauDonneesParent = tableauDonneesParent.filter(function(item) {
        return item !== elementBase64
    });
    // Récupérer le chemin de l'image pour suppression (dernier élément du div)
    var elementChemin = divImage.lastElementChild;
    tableauCheminsParent = tableauCheminsParent.filter(function(item) {
        return item !== elementChemin.value
    });
    // Supprimer l'élément div à l'index spécifié
    listeContainer.removeChild(divImage);
}

Parcours d'éléments par classe pour modification

// Réaffectation des numéros d'index
$($('.image').toArray().reverse()).each((index, val) => $(val).text(index+1))

Obtenir l'heure actuelle au format YYYYMMDDHHmmss

var tempsFormate = moment().format('YYYYMMDDHHmmss');

Étiquettes: JavaScript DOM manipulation frontend Programmation Web

Publié le 17 juillet à 02h26