interface Web
tutoriel HTML
Comment obtenir la valeur de l'attribut cible d'un lien en JavaScript ?
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 -
<!DOCTYPE html>
<html>
<body>
<p><a id="anchorid" rel="nofollow" target= "_blank"
href="https://www.tutorialspoint.com/">tutorialspoint</a></p>
<script>
var myVal = document.getElementById("anchorid").target;
document.write("Value of target attribute: "+myVal);
</script>
</body>
</html>
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.
<html>
<body>
<div>
<p> Click on "Get target atribute" button to diisplay the target
attribute of links </p>
<a id="link1" target="_self" href="https://www.tutorialspoint.com/"
>Link 1</a><br>
<a id="link2" target="_blank" href="https://www.tutorix.com/" >Link
2</a>
</div>
<br />
<div id="root"> </div>
<button onclick="getLink()"> Get target atrribute </button>
<script>
function getLink(){
// getting the target attribute value of anchor tags
let target1 = document.getElementById('link1').target
let target2 = document.getElementById('link2').target
// outputting the target values
let root = document.getElementById('root')
root.innerHTML = 'Link 1 target attribute: ' + target1 + '<br>'
root.innerHTML += 'Link 2 target attribute: ' + target2 + '<br>'
}
</script>
</body>
</html>
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<links.length; index++){
// accessing the target attribute from each element
let target = links[index].target
console.log(target)
}
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.
<html>
<body>
<p>
Get the value of the target attribute of a link in JavaScript using
<i> document.getElementsByTagName() </i> method
</p>
<div>
<a target="_self" href="https://www.tutorialspoint.com/" >Link
1</a><br>
<a target="_blank" href="https://www.tutorix.com/" >Link 2</a>
</div>
<br />
<div id="root"> </div>
<button onclick="getLink()"> Get target attribute </button>
<script>
function getLink(){
let root=document.getElementById('root')
let links=document.getElementsByTagName('a')
for (let index=0; index<links.length; index++) {
let target=links[index].target
root.innerHTML+=
'Link '+(index+1)+' target: '+target+'<br>'
}
}
</script>
</body>
</html>
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.
<html>
<body>
<p>
Get the value of the target attribute of a link in JavaScript using
<i> document.querySelectorAll() </i> method
</p>
<div>
<a target="_self" href="https://www.tutorialspoint.com/" >Link
1</a><br>
<a target="_blank" href="https://www.tutorix.com/" >Link 2</a><br>
<a href="https://www.tutorialspoint.com/" >Link 3(no target)</a>
</div>
<br />
<div id="root"> </div>
<button onclick="getLink()"> Get target Link </button>
<script>
function getLink(){
let root=document.getElementById('root')
let links=document.querySelectorAll('a[target]')
for (let index=0; index<links.length; index++) {
let target=links[index].target
root.innerHTML +=
'Link '+(index+1)+' target: '+target+'<br>'
}
}
</script>
</body>
</html>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
