Convertir le contenu DOM dynamique en tableau en javascript: meilleures pratiques pour éviter les problèmes de valeur nul

Ce didacticiel vise à résoudre un problème commun dans le développement JavaScript: lors de l'essayage de convertir le contenu DOM Élément DOM dynamiquement mis à jour en un tableau, la variable est toujours vide. Le noyau est de comprendre le synchronisation d'exécution du code JavaScript. L'article expliquera en détail pourquoi l'obtention du contenu DOM lorsque le script est chargé entraînera des valeurs nulles et fournira la bonne façon d'obtenir et de convertir le contenu en temps réel après l'interaction de l'utilisateur (comme dans les événements de clic de bouton), en garantissant la précision des données.

Dans le développement Web, nous devons souvent capturer et traiter le contenu généré dynamiquement sur les entrées ou les pages de l'utilisateur. Un scénario commun est que l'utilisateur ajoute du texte en un élément DOM (comme une zone d'affichage) en cliquant sur un bouton, puis nous voulons convertir le contenu texte de cette zone d'affichage en un tableau pour un traitement logique supplémentaire. Cependant, de nombreux développeurs rencontrent une confusion lorsqu'ils essaient pour la première fois: même si le contenu est déjà affiché sur la page, lorsqu'ils essaient de convertir le contenu textuel de l'élément DOM en un tableau, le tableau résultant est toujours vide (longueur: 0).

Comprendre la cause profonde du problème: le synchronisation d'exécution du code JavaScript

Le cœur du problème réside dans le calendrier d'exécution du code JavaScript. Considérez l'extrait de code suivant:

 const typedNum = document.QuerySelector ("# num-aaa");
// ... Autre sélection des éléments DOM ...
const arr_equation = typedNum.textContent.split (""); // Cette ligne est la racine du problème // ... Autres auditeurs d'événements ...

Lorsque le navigateur charge et analyse HTML, CSS et JavaScript, le code JavaScript est exécuté de haut en bas. Dans le code ci-dessus, const arr_equation = typednum.textContent.split (""); Cette ligne sera exécutée immédiatement lorsque le script sera chargé. À ce stade, l'élément # num-région est généralement vide car il n'a encore reçu aucune entrée utilisateur. Par conséquent, typedNum.TextContent est une chaîne vide à ce moment, et après l'avoir divisé (""), vous obtiendrez naturellement un tableau vide. Après cela, même si l'utilisateur clique sur le bouton pour ajouter le contenu sur typednum, la valeur de la variable ARR_Equation n'est pas automatiquement mise à jour car elle est constante déclarée via const et sa valeur est déterminée à l'initialisation.

La bonne solution: obtenez un contenu dynamique à la demande

Pour résoudre ce problème, la clé consiste à retarder le fonctionnement de l'obtention de TextContent et de la convertir en un tableau jusqu'à ce que ce contenu dynamique soit vraiment nécessaire. En règle générale, cela signifie placer cette partie de la logique à l'intérieur de l'écouteur d'événements qui déclenche le traitement des données. Par exemple, lorsque l'utilisateur clique sur le bouton "égal à", il obtiendra le dernier contenu texte de l'élément typedNum.

Voici un exemple de code JavaScript modifié:

 const typedNum = document.QuerySelector ("# num-aaa");
const result = Document.QuerySelector ("# Result");
const one = document.QuerySelector ("# un");
const deux = document.QuerySelector ("# deux");
const Plus = Document.QuerySelector ("# plus");
const equal = document.QuerySelector ("# égal");

// Remarque: Arr_equation n'est plus déclaré en haut, car il nécessite d'obtenir dynamiquement un.addeventListener ("cliquez", function () {
    typedNum.TextContent = "1";
});
deux.addeventListener ("cliquez", fonction () {
    typednum.textContent = "2";
});
plus.addeventListener ("cliquez", fonction () {
    typednum.textContent = "";
});

égal.addeventListener ("cliquez", fonction () {
    // Lorsque vous cliquez sur le bouton "égal à", obtenez le dernier contenu de typednum en temps réel arr_equation = typednum.textContent.split ("");
    result.TextContent = arr_equation; // L'attribution du tableau directement à TextContent se convertira automatiquement en chaîne});

En déplaçant const arr_equation = typedNum.TextContent.split (""); Dans l'écouteur d'événements de clics du bouton égal, nous nous assurons que chaque fois que le bouton "égal" est cliqué, le dernier contenu de texte actuel de l'élément typedNum contenant l'entrée utilisateur est pris et converti en un tableau.

Optimisation et précautions supplémentaires

Dans les applications pratiques, nous devrons peut-être traiter davantage le contenu obtenu. Par exemple, si le typedNum.TextContent contient des espaces supplémentaires (tels que "1 2") et que nous ne voulons pas que ces espaces apparaissent dans l'élément de tableau final, nous pouvons utiliser la méthode du filtre pour le nettoyer:

 égal.addeventListener ("cliquez", fonction () {
    const arr_equation = typednum.textContent
                                  .diviser("")
                                  .filter (item => item! == ""); // Filtre Out Spaces result.TextContent = arr_equation.join (','); // Conatenate des éléments du tableau avec des virgules à afficher, ce qui est plus clair});

Ici, filtre (item => item! == "") supprimera tous les caractères d'espace du tableau. En même temps, modifiez le résultat.TextContent = arr_equation; to result.textContent = arr_equation.join (','); Pour afficher divers éléments du tableau plus clairement dans la zone de résultats, en évitant l'inconvénient que le comportement ToString () par défaut peut provoquer.

Exemple de code complet

Pour fournir un contexte complet, voici un exemple complet de HTML, CSS et JavaScript qui montre comment créer une interface de calculatrice simple et gérer correctement le contenu dynamique:

Html (index.html):

 

<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <titre> Tutoriel pour le contenu Dom Dynamic To Array 
    <link rel="Stylesheet" href="style.css">
 head>

    <pre id="num-aaa">  pre>
    <div id="result"> </div>

    <span id="one"> 1 </span>
    <span id="deux"> 2 </span>
    <span id="plus"> </span>
    <span id="égal"> = </span>

    <script src="script.js"> </ script>

</script>

CSS (style.css):

 # num-aaa {
    Largeur: 440px;
    hauteur: 100px;
    Position: absolue;
    en haut: 0;
    Font-Family: Arial;
    taille de police: 35px;
    Color d'arrière-plan: #DDD;
    Couleur: # 000;
    rembourrage: 20px;
    Dimensionnement en boîte: Border-Box; / * Assurez-vous que le rembourrage n'augmente pas la largeur totale * /
    Espace blanc: pré-wrap; / * Autoriser les wraps de ligne de texte * /
}
#résultat {
    Largeur: 440px;
    hauteur: 50px;
    Position: absolue;
    En haut: 150px;
    Font-Family: Arial;
    taille de police: 20px;
    Color d'arrière-plan: #FDD;
    Couleur: # 000;
    rembourrage: 10px 20px;
    Dimensionnement en boîte: Border-Box;
    Affichage: flex;
    Align-Items: Centre;
}
portée {
    en bas: 0;
    Position: absolue;
    Largeur: 90px;
    hauteur: 55px;
    Color en arrière-plan: bleu;
    Border-Radius: 15px;
    Couleur: #ffff;
    taille de police: 20px;
    Font-Family: Arial;
    Affichage: flex;
    Justification-contenu: centre;
    Align-Items: Centre;
    curseur: pointeur;
}
#un {
  marge-gauche: 100px;
}
#two {/ * ajouter le style #two pour l'aligner avec # one * /
  marge-gauche: 0px; / * Supposons sur le côté gauche de #one, ou ajustez en fonction de la disposition * /
  en bas: 0; / * Cohérent avec les autres boutons * /
}
#Plus {
  marge-gauche: 200px;
}
#égal {
  marge-gauche: 300px;
}

Javascript (script.js):

 const typedNum = document.QuerySelector ("# num-aaa");
const result = Document.QuerySelector ("# Result");
const one = document.QuerySelector ("# un");
const deux = document.QuerySelector ("# deux");
const Plus = Document.QuerySelector ("# plus");
const equal = document.QuerySelector ("# égal");

one.addeventListener ("cliquez", fonction () {
    typedNum.TextContent = "1";
});
deux.addeventListener ("cliquez", fonction () {
    typednum.textContent = "2";
});
plus.addeventListener ("cliquez", fonction () {
    typednum.textContent = "";
});

égal.addeventListener ("cliquez", fonction () {
    const arr_equation = typednum.textContent
                                  .diviser("")
                                  .filter (item => item! == ""); // Filtre Out Spaces result.TextContent = "Content du Array: [" arr_equation.join (',') "]";
});

Résumer

Lorsque vous traitez avec le contenu dynamique DOM, le principe de base est "le mettre à la demande" . Au lieu d'obtenir du contenu DOM qui change avec l'interaction utilisateur à la fois lorsque le script se charge, la demande et les obtenir chaque fois que le dernier état de ces contenus est nécessaire (par exemple, à l'intérieur de l'écouteur d'événements). Comprendre le calendrier de l'exécution JavaScript et le cycle de vie des variables est la clé pour éviter de tels problèmes courants. En suivant ces meilleures pratiques, vous pouvez vous assurer que votre application Web peut gérer la saisie dynamique des utilisateurs et le contenu de page avec précision et de manière fiable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!