Notes de lecture 'JavaScript DOM Programming Art' - Bibliothèque d'images JavaScript_Compétences Javascript

Deux façons de modifier l'attribut src d'une image :

1. La méthode setAttribute est un composant du "DOM de niveau 1", qui peut définir n'importe quel attribut du nœud d'élément.

2, element.src = source; C'était la méthode avant l'avènement du "DOM niveau 1" et elle fonctionne maintenant.

L'avantage du "DOM niveau 1" est sa portabilité. Ces anciennes méthodes ne sont applicables qu'aux documents Web, tandis que le DOM est applicable à n'importe quel langage de balisage.

Fonction de gestionnaire d'événements

Lorsqu'un lien est cliqué, je souhaite rester sur cette page web au lieu d'aller dans une autre fenêtre. Le code est le suivant :

Copier le code Le code est le suivant :

http://www.example.com" onclick="showPic(this); return false ;">Click

Lorsque vous cliquez sur ce lien, car le code Javascript déclenché par le gestionnaire d'événements onclick renvoie false, le comportement par défaut de ce lien n'est pas déclenché.

attribut childNodes

L'attribut childNodes peut être utilisé pour obtenir tous les éléments enfants de n'importe quel élément. Le tableau renvoyé par la propriété childNodes contient des nœuds de tous types, pas seulement des nœuds d'éléments. En fait, presque tout dans le document est un nœud. Même les espaces et les nouvelles lignes sont interprétés comme des nœuds et ils sont tous inclus dans le tableau renvoyé par la propriété childNodes.

Mais chaque nœud a l'attribut nodeType. L'attribut nodeType a un total de 12 valeurs possibles, mais seulement 3 d'entre elles ont de la valeur : la valeur de l'attribut nodeType des nœuds d'élément est 1, la valeur de l'attribut nodeType des nœuds d'attribut est 2 et la valeur de l'attribut nodeType des nœuds de texte est 3.

Si vous souhaitez modifier la valeur d'un nœud de texte, utilisez l'attribut nodeValue fourni par DOM.

L'élément de tableau childNodes[0] a un synonyme plus intuitif et lisible, qui peut être écrit comme firstChild ; DOM fournit également un attribut lastChild correspondant ;

Exemple :

Copier le code Le code est le suivant :

Choisissez une image

Créez d'abord une variable pour la stocker :

Copier le code Le code est le suivant :

var description = document.getElementById("description");

La valeur de retour de description.nodeValue est nulle. L'attribut nodeValue de l'élément

lui-même est une valeur nulle. Si vous souhaitez obtenir la valeur du texte contenu dans l'élément

, utilisez description.childNodes[0].nodeValue ou description.firstChild.nodeValue.