Accès aux éléments de tableau

Dans la structure DOM, les éléments de tableau offrent des propriétés spécifiques pour naviguer efficacement. La propriété tBodies renvoie une collection de tous les éléments tbody, tandis que tHead et tFoot donnent accès aux sections d'en-tête et de pied. Les attributs rows et cells permettent de cibler les lignes et les cellules respectivement.

document.addEventListener('DOMContentLoaded', function() {
    var table = document.querySelector('#monTableau');
    var celluleCible = table.tBodies[0].rows[1].cells[1];
    console.log(celluleCible.textContent);
});

Utilisation de la méthode search

La méthode search sur une chaîne de caractères retourne l'index de la première occurrence d'un sous-chaîne spécifiée, ou -1 si elle n'est pas trouvée.

var phrase = 'example123';
var position = phrase.search('123'); // Retourne 7, ou -1 si absent

Rôle de appendChild

La méthode appendChild déplace un nœud DOM de son parent actuel vers un nouveau parent. Elle supprime l'élément de sa position initiale avant de l'ajouter à la desitnation.

document.addEventListener('DOMContentLoaded', function() {
    var listeSource = document.querySelector('#listeA');
    var listeDestination = document.querySelector('#listeB');
    var bouton = document.querySelector('#btnDeplacer');

    bouton.addEventListener('click', function() {
        var premierElement = listeSource.firstElementChild;
        listeDestination.appendChild(premierElement);
    });
});

Tri d'un tableau HTML

Pour trier les lignes d'un tableau selon une colonne spécifique, on collecte les lignes dans un tableau JavaScript, on les trie avec une fonction de comparaison, puis on les réinsère dans le tbody en utilisant appendChild.

document.addEventListener('DOMContentLoaded', function() {
    var table = document.querySelector('#tableDonnees');
    var boutonTri = document.querySelector('#btnTrier');

    boutonTri.addEventListener('click', function() {
        var lignes = Array.from(table.tBodies[0].rows);
        lignes.sort(function(a, b) {
            var valeurA = parseInt(a.cells[0].textContent, 10);
            var valeurB = parseInt(b.cells[0].textContent, 10);
            return valeurA - valeurB;
        });
        lignes.forEach(function(ligne) {
            table.tBodies[0].appendChild(ligne);
        });
    });
});

Gestion des événements de formulaire

Les formulaires HTML déclenchent des événements spécifiques comme submit lors de la soumission et reset lors de la réinitialisation. Il est possible de intercepter ces événements pour ajouter une logique personnalisée, comme empêcher la soumission par défaut.

document.addEventListener('DOMContentLoaded', function() {
    var formulaire = document.querySelector('#formulaireContact');

    formulaire.addEventListener('submit', function(e) {
        e.preventDefault(); // Bloque l'action par défaut
        console.log('Formulaire soumis avec validation');
    });

    formulaire.addEventListener('reset', function() {
        console.log('Champs réinitialisés');
    });
});