Maison > Article > interface Web > 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 ?
- 王林avant
- 2023-09-03 09:33:02783parcourir
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!