La colección de enlaces DOM se utiliza para devolver la colección de todos los elementos <a> y <area> con el atributo «href» en un documento HTML. Los elementos de la colección se ordenan tal como aparecen en el código fuente.
Sintaxis:
document.links
Propiedades : contiene una sola propiedad de longitud que se utiliza para devolver la cantidad de elementos <a> y <area> en la colección.
Métodos : la colección de enlaces DOM contiene tres métodos que se enumeran a continuación:
- [índice]: se utiliza para devolver el elemento <a> y <area> del índice especificado. El valor de índice comienza con 0. El valor NULL devuelto si el valor de índice está fuera de rango.
- item(index): Se utiliza para devolver el elemento <a> y <area> del índice seleccionado. El valor de índice comienza con 0. El valor NULL devuelto si el valor de índice está fuera de rango. Este método funciona de manera similar al método anterior.
- namedItem(id): se utiliza para devolver el elemento <a> y <area> de la colección que coincide con el id especificado. Se devuelve NULL si la identificación no existe.
Valor de retorno: un objeto HTMLCollection, que representa todos los elementos <a> y/o elementos <area> en el documento. Los elementos de la colección se ordenan tal como aparecen en el código fuente.
Los siguientes programas ilustran el uso de la propiedad documents.links en HTML:
Ejemplo 1: Uso de la propiedad length para contar el número de elementos de enlaces en la colección.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM document.links() Property
</title>
<!-- script to count links -->
<script>
function countLinks() {
let collection = document.links.length;
document.querySelector(".count").innerHTML =
collection;
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<!-- list of links -->
<li><a id="js" href=
"https://www.geeksforgeeks.org/javascript-tutorial/">
Javascript-Tutorial
</a></li>
<li><a id="python" href=
"https://www.geeksforgeeks.org/python-programming-language/">
Python Programming Language
</a></li>
<li><a id="cpp" href=
"https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a></li>
<li><a id="html" href=
"https://www.geeksforgeeks.org/html-tutorials/">
HTML Tutorials
</a></li>
</ul>
<!-- button to count number of links -->
<button onclick="countLinks()">
Count links
</button>
<br>
<br>
<span>Total links: </span>
<span class="count"></span>
</body>
</html>
Producción:
Ejemplo 2: código HTML para encontrar todos los enlaces en el documento y devolver sus ID.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM document.links() Property
</title>
<script>
/* function to find IDs */
function findLinkIDs() {
let final = '';
let collection = document.links;
// Run a for loop upto the number of
// links in the collection
for (let i = 0; i < collection.length; i++) {
// Add each link id to a list
final += `<li> ${collection[i].id} </li>`;
}
// Replace the HTML of the ID div
document.querySelector(".ids").innerHTML =
final;
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<!-- list of links -->
<li><a id="js" href=
"https://www.geeksforgeeks.org/javascript-tutorial/">
Javascript-Tutorial
</a></li>
<li><a id="python" href=
"https://www.geeksforgeeks.org/python-programming-language/">
Python Programming Language
</a></li>
<li><a id="cpp" href=
"https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a></li>
<li><a id="html" href=
"https://www.geeksforgeeks.org/html-tutorials/">
HTML Tutorials
</a></li>
</ul>
<!-- button to find id -->
<button onclick="findLinkIDs()">
Find link IDs
</button>
<p>The IDs of all the links are: </p>
<div class="ids"></div>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Ejemplo 3: Uso de la propiedad id para buscar por ID de enlace y mostrar su atributo href
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM document.links() Property
</title>
<script>
function returnLinkByID() {
let collection =
document.links.namedItem("js");
// Get the href attribute
let link = collection.href;
document.querySelector(".name").innerHTML =
link;
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Articles:</h2>
<ul>
<!-- collection of links -->
<li><a id="js" href=
"https://www.geeksforgeeks.org/javascript-tutorial/">
Javascript-Tutorial
</a></li>
<li><a id="python" href=
"https://www.geeksforgeeks.org/python-programming-language/">
Python Programming Language
</a></li>
<li><a id="cpp" href=
"https://www.geeksforgeeks.org/c-plus-plus/">
C++ Programming Language
</a></li>
<li><a id="html" href=
"https://www.geeksforgeeks.org/html-tutorials/">
HTML Tutorials
</a></li>
</ul>
<button onclick="returnLinkByID()">
Find by link ID
</button>
<p>
The href attribute in the link
with id of 'js' is:
</p>
<div class="name"></div>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con el método de recopilación de enlaces DOM se enumeran a continuación:
- Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 12.1 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA