Méthode getAttribute ()
Jusqu'à présent, nous avons introduit deux façons de récupérer des nœuds d'élément spécifiques: l'un 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 prévoyez de remettre en question:
object.getAttribute (attribut)
Cependant, la méthode getAttribute () ne peut pas être appelée via l'objet de document, qui est différent des autres méthodes que nous avons introduites auparavant. Nous ne pouvons l'appeler que via un objet de nœud d'élément.
Par exemple, vous pouvez le combiner avec la méthode GetElementsByTagName () pour interroger l'attribut de titre de chaque élément <p> comme indiqué ci-dessous:
var text = document.getElementsByTagName ("p") pour (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 "Shopping List" donné plus tôt et rechargez la page dans un navigateur Web, une boîte de dialogue Alter avec le message texte "un doux rappel" apparaîtra à l'écran.
Il n'y a qu'un seul élément <p> avec l'attribut de titre dans le document de la liste d'achat. Si le document a un ou plusieurs éléments <p> sans attribut de titre, l'appel correspondant GetAttribute ("Title") renvoie Null. Null est une valeur nul dans le langage javascript, et sa signification est "la chose que vous avez dit n'existe pas". Si vous souhaitez le vérifier personnellement, veuillez insérer le texte suivant dans le paragraphe de texte existant dans le document de la liste d'achat:
<p> c'est juste un test </p>
Recharger ensuite la page. Cette fois, vous verrez deux boîte de dialogue modifier, et la deuxième boîte de dialogue sera vide ou affichera uniquement le mot "nul" - la situation spécifique dépend de la façon dont votre navigateur Web affichera la valeur nul.
Nous pouvons modifier notre script afin qu'il n'apparaît un message que lorsque la propriété de titre existe. Nous ajouterons une instruction IF pour vérifier si la valeur de retour de la méthode getAttribute () est nul. Profitant de cette opportunité, nous avons également ajouté plusieurs 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 Alter montrant le message "un doux rappel", comme illustré ci-dessous.
Nous pouvons même réduire ce code à un code plus court. Lorsque vous vérifiez si une certaines données est une valeur nulle, nous vérifions réellement s'il existe. Ce type de chèque peut être simplifié pour utiliser directement les données vérifiées comme condition pour l'instruction IF. Si (quelque chose) est complètement équivalent à if (quelque chose! = null), mais le premier est évidemment plus concis. Pour le moment, si quelque chose existe, la condition de la déclaration IF sera vraie; Si quelque chose n'existe pas, la condition de l'instruction IF sera fausse.
À cet exemple, tant que nous remplaçons if (title_text! = Null) avec if (title_text), nous pouvons obtenir du code plus concis. De plus, afin d'augmenter davantage la lisibilité du code, nous pouvons également saisir cette occasion pour rédiger des déclarations modifiées et si des déclarations sur la même ligne, ce qui peut les rapprocher des phrases anglaises dans notre vie quotidienne:
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 auparavant ne peuvent être utilisées que pour récupérer des informations. La méthode setAttribute () a une différence essentielle par rapport à eux: il nous 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 du nœud d'élément, mais la méthode setAttribute () nous oblige à y transmettre deux paramètres:
OBECT.SetAttribute (attribut, valeur)
Dans l'exemple suivant, la première instruction récupérera l'élément dont la valeur d'attribut ID est l'achat, et la deuxième instruction définira la valeur d'attribut de titre de cet élément sur une liste de marchandises:
var shopping = document.getElementByid ("achats") shopping.setAttribute ("title", "une liste de marchandises")Nous pouvons utiliser la méthode getAttribute () pour prouver que la valeur d'attribut de titre de cet élément a en effet changé:
var shopping = document.getElementById ("achats"); alert (shopping.getAttribute ("title")); shopping.setAttribute ("title", "une liste de marchandises"); alert (shopping.getAttribute ("title"));Les instructions ci-dessus apparaîtront deux boîtes de dialogue d'alerte à l'écran: la première boîte de dialogue Alter apparaît avant que la méthode setAttribute () ne soit appelée, elle sera vide ou que le mot "nul" s'affiche; La seconde apparaît après la définition de la valeur d'attribut de titre, elle affichera le message "une liste de marchandises".
Dans l'exemple ci-dessus, nous définissons l'attribut de titre d'un nœud existant, mais cet attribut n'existait pas en premier lieu. Cela signifie que l'appel setAttribute () Nous publions réellement deux opérations: créez d'abord cet attribut, puis définissez sa valeur. Si nous utilisons la méthode setAttribute () sur un attribut existant du nœud d'élément, la valeur actuelle de cet attribut sera écrasée.
Dans l'exemple de document "Shopping List", l'élément <p> a déjà un attribut de titre, et la valeur de cet attribut est un rappel doux. Nous pouvons utiliser la méthode setAttribute () pour modifier 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 (title "); alert (title] .getAttribute (" title ") if (text) {ts [i]. réussira! ") alert (ts [i] .getAttribute (" titre "))}}Le code ci-dessus récupérera d'abord tous les éléments <p> qui ont déjà des attributs de titre du document, puis modifieront toutes leurs valeurs d'attribut de titre à un tout nouveau texte de titre. Plus précisément pour le document "Liste des achats", la valeur de la propriété Un rappel doux sera écrasé.
Voici un détail très remarquable: les modifications du document via la méthode setAttribute () entraîneront la modification des effets et / ou des comportements dans la fenêtre du navigateur, mais lorsque nous afficherons le code source du document via l'option source de vue du navigateur, nous verrons toujours la valeur d'attribut originale - c'est-à-dire le code de source lui-même. Ce phénomène de "incohérent à l'intérieur et à l'extérieur" provient du mode de travail de DOM: Chargez d'abord le contenu statique du document, puis les rafraîchir dynamiquement. Le rafraîchissement dynamique n'affecte pas le contenu statique du document. Il s'agit exactement de la puissance et de la tentation de DOM: le contenu de page rafraîchissant ne nécessite pas que les utilisateurs finaux effectuent des opérations de rafraîchissement de page dans leurs navigateurs.