Comment construire des éléments HTML dynamiques en JavaScript - des nuls

L'un des éléments constitutifs de la création d'effets spéciaux pour n'importe quelle page est la possibilité d'apporter des modifications HTML dynamiques à la page. Par exemple, vous pouvez créer un effet spécial pour l'élément sélectionné, comme indiqué dans l'exemple suivant.

function ChangeStyles (event) {// Obtenir une référence à l'élément. var ThisElement = document. getElementById (événement: currentTarget. id); // Vérifie le type d'événement. if (event. type == "mouseover") {// Change la classe CSS de l'élément cible. ThisElement. setAttribute ("class", "Selected");} else {ThisElement. setAttribute ("class", "Normal");}}

Ce code accepte un événement en entrée. Le code obtient une référence à l'élément fourni par l'objet Event. Il vérifie ensuite l'événement. tapez la propriété pour déterminer quel type d'événement s'est produit (soit un passage de la souris ou un passage de souris). Le type d'événement détermine le type de formatage utilisé par l'élément.

Bien sûr, il serait pratique de fournir une sorte d'automatisation pour assigner un gestionnaire d'événement aux événements onmouseover et onmouseout. Le code suivant exécute cette tâche pour vous:

// Obtenir une liste d'éléments qui utilisent la balise
. var ElementList = document. getElementsByTagName ("p"); // Traiter chacune de ces balises à tour de rôle. pour (var i = 0; i 
C'est une autre variante de l'interaction avec un groupe d'éléments qui utilisent la même balise - la balise
dans ce cas. Le code obtient un tableau de ces éléments en appelant getElementsByTagName (). Il affecte ensuite la fonction ChangeStyles () aux propriétés onmouseover et onmouseout de chaque élément. Le résultat est que chaque balise
sur la page réagit lorsque vous passez la souris dessus.