Introduction à l'utilisation de getAttribute en JavaScript

Au cours de notre processus de développement, je pense que tout le monde sait que la méthode getAttribute() en JavaScript est une fonction, et getAttribute() n'a qu'un seul paramètre - ce que vous prévoyez de interroger Le nom de l'attribut , nous allons aujourd'hui vous présenter l'utilisation de getAttribute en JavaScript !

Méthode getAttribute()

Jusqu'à présent, nous vous avons présenté deux méthodes pour récupérer des nœuds d'éléments spécifiques : l'une consiste à utiliser la méthode getElementById() et la autre est La première 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 :
object.getAttribute(attribute)
Cependant, la méthode getAttribute() ne peut pas être appelée via l'objet document, qui C'est ce que nous avons présenté auparavant. Les autres méthodes sont différentes. 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, comme indiqué ci-dessous :

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, allez à la fin du document exemple "Liste de courses" donné plus tôt et rechargez la page dans votre navigateur Web. Une boîte de dialogue de modification apparaîtra à l'écran avec le message texte "un petit rappel".
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 le document Liste de courses après le paragraphe de texte existant :

<p>This is just test</p>

puis rechargez 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.
Notre script peut être modifié 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'un message indiquant "un petit rappel" modifier la boîte de dialogue, 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 stade, 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écifiquement pour 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 : 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 d'élément, mais la méthode setAttribute() nous oblige à lui transmettre deux paramètres :
obiect .setAttribute(attribute,value )
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"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，e388a4556c0f65e1904146cc1a846bee元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值：

<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"))
}
}

上面这段代码将先从文档里把已经带有title属性的e388a4556c0f65e1904146cc1a846bee元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

总结：

相信小伙伴们通过本文的认真学习以后，对JavaScript中getAttribute的使用有了进一步的了解和认识，希望通过本文介绍对你的工作有所帮助！

相关推荐：

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？

有趣的script标签用getAttribute方法来自脚本吧

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!