Comment obtenir la valeur de l'attribut cible d'un lien en JavaScript ?

Dans ce tutoriel, nous apprendrons comment obtenir la valeur de l'attribut cible d'un lien en JavaScript.

L'attribut cible spécifie où ouvrir le document ou la page lié.

Par défaut, sa valeur est définie sur "_self", ce qui signifie que le document lié doit s'ouvrir dans la même fenêtre ou le même onglet. Il peut également avoir des valeurs telles que "_blank", "_self", "_parent", "_top" et "frame_name", où chaque valeur définit un emplacement différent où le document lié est ouvert.

Utiliser les attributs cibles

Pour obtenir la valeur de l'attribut cible d'un lien en JavaScript, utilisez l'attribut cible. L'attribut target permet de définir l'emplacement où le document lié est ouvert, c'est-à-dire dans la même fenêtre, une nouvelle fenêtre, le même cadre, etc.

Nous pouvons utiliser la méthode document.getElementById() pour obtenir des éléments HTML. Cette méthode prend l'identifiant de l'élément comme paramètre et renvoie un objet élément. A partir de cet objet, nous pouvons utiliser l'attribut "target" pour obtenir la valeur de l'attribut cible de l'élément.

Grammaire

document.getElementById('mylink').target

Dans la syntaxe ci-dessus, "mylink" est l'identifiant du lien (par exemple, la balise d'ancrage), et en utilisant la méthode document.getElementById() avec l'attribut "target", nous pouvons obtenir la valeur de l'attribut cible de ce lien.

Exemple 1

Vous pouvez essayer d'exécuter le code suivant pour obtenir la valeur de l'attribut cible du lien -

   
tutorialspoint
   

Exemple 2

Dans l'exemple ci-dessous, nous utilisons la méthode document.getElementById() et l'attribut target pour obtenir la valeur de l'attribut target de deux liens différents.

  
 
 Click on "Get target atribute" button to diisplay the target attribute of links 
 Link 1
 Link 2 
 
 
 
  Get target atrribute    

Utilisez la méthode getElementsByTagName()

En JavaScript, la méthode document.getElementsByTagName() peut être utilisée pour obtenir la valeur de l'attribut cible d'un lien ou d'une balise d'ancrage. Il accepte les noms de balises dans les paramètres et renvoie une HTMLCollection, similaire à une liste ou un tableau. Il contient tous les objets éléments de ce nom de balise, et à partir de chaque objet, nous pouvons également obtenir la valeur de l'attribut cible en utilisant l'attribut "target".

Grammaire

// getting all anchor tags let links = document.getElementsByTagName('a') // looping through all the HTMLCollection links for (let index=0; index
        

         Copier après la connexion
        
       

Dans la syntaxe ci-dessus, la méthode document.getElementByTagName() prend « a » comme paramètre, elle renvoie donc tous les éléments de HTMLCollection qui sont des balises d'ancrage et en parcourant celle-ci, nous obtenons la valeur de l'attribut cible de tous les éléments de la lien et console Enregistrez-le.

Exemple 3

Dans l'exemple ci-dessous, nous utilisons la méthode document.getElementByTagName() pour obtenir la valeur de l'attribut cible à partir du lien.

  
 Get the value of the target attribute of a link in JavaScript using  document.getElementsByTagName()  method 
 
 Link 1
 Link 2 
 
 
 
  Get target attribute    

Utilisez la méthode querySelectorAll()

En JavaScript, vous pouvez utiliser la méthode document.querySelectorAll() pour obtenir la valeur de l'attribut cible d'un lien ou d'une balise d'ancrage.

Grammaire

Voici la syntaxe pour obtenir toutes les balises d'ancrage avec l'attribut cible -

document.querySelectorAll('a[target]')

Dans la syntaxe ci-dessus, la méthode document.querySelectorAll() prend "a[target]" comme paramètre. Ainsi, il renvoie tous les éléments, qui sont des balises d'ancrage dans une NodeList contenant l'attribut cible, et en le parcourant, nous pouvons obtenir toutes les valeurs de l'attribut cible.

Exemple

Dans l'exemple ci-dessous, nous utilisons la méthode document.querySelectorAll() pour obtenir la valeur de l'attribut cible du lien.

  
 Get the value of the target attribute of a link in JavaScript using  document.querySelectorAll()  method 
 
 Link 1
 Link 2
 Link 3(no target) 
 
 
 
  Get target Link    

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!