Exemple d'utilisation de la méthode getAttribute dans les compétences js_javascript

Méthode getAttribute()

Jusqu'à présent, nous vous avons présenté deux façons de récupérer des nœuds d'éléments spécifiques : l'une consiste à utiliser la méthode getElementById() et l'autre consiste à utiliser la méthode getElementsByTagName(). Après avoir trouvé cet élément, nous pouvons utiliser la méthode getAttribute() pour interroger les valeurs de ses différents attributs.
La méthode getAttribute() est une fonction. Il n'a qu'un seul paramètre : le nom de l'attribut que vous souhaitez interroger :
objet.getAttribute(attribut)
Cependant, la méthode getAttribute() ne peut pas être appelée via l'objet document, contrairement aux autres méthodes que nous avons présentées précédemment. Nous ne pouvons l'appeler que via un objet nœud d'élément.
Par exemple, vous pouvez le combiner avec la méthode getElementsByTagName() pour interroger l'attribut title de chaque élément e388a4556c0f65e1904146cc1a846bee

var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}

Si vous insérez le code ci-dessus à la fin de l'exemple de document "Liste de courses" donné précédemment et rechargez la page dans un navigateur Web, un message texte "un petit rappel" apparaîtra sur l'écran de la boîte de dialogue de modification. .

Il n'y a qu'un seul élément e388a4556c0f65e1904146cc1a846bee avec un attribut title dans le document "Liste de courses". Si ce document comporte également un ou plusieurs éléments e388a4556c0f65e1904146cc1a846bee sans attribut title, l'appel getAttribute("title") correspondant renverra null. Null est la valeur nulle dans le langage JavaScript, ce qui signifie « la chose dont vous parlez n'existe pas ». Si vous souhaitez vérifier cela par vous-même, insérez d'abord le texte suivant dans votre document Liste de courses après le paragraphe de texte existant :
e388a4556c0f65e1904146cc1a846beeCeci est juste un test94b3e26ee717c64999d7867364b1b4a3
Rechargez ensuite la page. Cette fois, vous verrez deux boîtes de dialogue de modification, et la deuxième boîte de dialogue sera vide ou affichera simplement le mot "null" - selon la façon dont votre navigateur Web affiche les valeurs nulles.
Nous pouvons modifier notre script pour qu'il n'affiche un message que lorsque l'attribut title existe. Nous ajouterons une instruction if pour vérifier si la valeur de retour de la méthode getAttribute() est nulle. Profitant de cette opportunité, nous avons également ajouté quelques variables pour améliorer la lisibilité du script :

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}

Maintenant, si vous rechargez cette page, vous ne verrez qu'une boîte de dialogue de modification avec le message "un doux rappel", comme indiqué ci-dessous.

Nous pouvons même raccourcir ce code. Lorsqu'on vérifie si une donnée est nulle, on vérifie en réalité si elle existe. Cette vérification peut être simplifiée en utilisant directement les données vérifiées comme condition de l'instruction if. if (something) est complètement équivalent à if (something != null), mais le premier est évidemment plus concis. À ce moment-là, si quelque chose existe, la condition de l'instruction if sera vraie ; si quelque chose n'existe pas, la condition de l'instruction if sera fausse.
Spécifique à cet exemple, tant que nous remplaçons if (title_text != null) par if (title_text), nous pouvons obtenir un code plus concis. De plus, afin d'augmenter encore la lisibilité du code, on peut également en profiter pour écrire l'instruction alter et l'instruction if sur la même ligne, ce qui peut les rapprocher des phrases anglaises de notre quotidien :

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text) alert(text)
}

3.4.2 Méthode setAttribute()

Toutes les méthodes que nous vous avons présentées précédemment ne peuvent être utilisées que pour récupérer des informations. La méthode setAttribute() présente une différence essentielle avec elles : elle permet de modifier la valeur du nœud d'attribut.
Semblable à la méthode getAttribute(), la méthode setAttribute() est également une fonction qui ne peut être appelée que via l'objet nœud élément, mais la méthode setAttribute() nous oblige à lui passer deux paramètres :
obiect.setAttribute(attribut,valeur)
Dans l'exemple suivant, la première instruction récupérera l'élément dont la valeur d'attribut id est Purchase, et la deuxième instruction définira la valeur d'attribut title de cet élément sur une liste de marchandises :

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

On peut utiliser la méthode getAttribute() pour prouver que la valeur de l'attribut title de cet élément a bien changé :

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

Les instructions ci-dessus feront apparaître deux boîtes de dialogue d'alerte à l'écran : la première boîte de dialogue de modification apparaît avant l'appel de la méthode setAttribute(), elle sera vide ou affichera le mot « null », la seconde apparaîtra après le ; La valeur de l'attribut title est définie, le message "une liste de marchandises" s'affichera.

Dans l'exemple ci-dessus, nous définissons l'attribut title d'un nœud existant, mais cet attribut n'existait pas à l'origine. Cela signifie que l'appel setAttribute() que nous avons émis a en fait effectué deux opérations : d'abord créé l'attribut, puis défini sa valeur. Si nous utilisons la méthode setAttribute() sur un attribut existant d'un nœud d'élément, la valeur actuelle de cet attribut sera écrasée.
Dans le document exemple "Liste de courses", l'élément e388a4556c0f65e1904146cc1a846bee possède déjà un attribut title dont la valeur est un petit rappel. Nous pouvons utiliser la méthode setAttribute() pour changer sa valeur actuelle :

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功！")
alert(ts[i].getAttribute("title"))
}
}

Le code ci-dessus récupérera d'abord tous les éléments e388a4556c0f65e1904146cc1a846bee avec des attributs de titre du document, puis modifiera toutes leurs valeurs d'attribut de titre​​en un tout nouveau texte de titre. Spécifique au document "Liste de courses", la valeur de l'attribut un petit rappel sera remplacée.
Il y a un détail qui mérite attention ici : les modifications apportées au document via la méthode setAttribute() entraîneront des changements correspondants dans l'effet d'affichage et/ou le comportement du document dans la fenêtre du navigateur, mais lorsque nous utilisons la vue du navigateur Lorsque vous affichez le code source d'un document à l'aide de l'option source, vous verrez toujours les valeurs d'attribut d'origine - c'est-à-dire que les modifications apportées par la méthode setAttribute() ne seront pas reflétées dans le code source du document lui-même. Ce phénomène « d'incohérence entre l'apparence et l'intérieur » vient du mode de fonctionnement du DOM : charger d'abord le contenu statique du document, puis le rafraîchir dynamiquement. Le rafraîchissement dynamique n'affecte pas le contenu statique du document. C'est là le véritable pouvoir et l'attrait du DOM : l'actualisation du contenu de la page ne nécessite pas que l'utilisateur final effectue une opération d'actualisation de la page dans son navigateur.