La propiedad length() se usa para devolver la colección de todos los elementos HTML en un documento. Es una propiedad de solo lectura y es bastante útil cuando un usuario desea recorrer una colección HTML.
Sintaxis:
HTMLCollection.length
Valor devuelto: Devuelve un número que representa el número de todos los elementos en una colección HTML.
El siguiente ejemplo muestra cómo contar el elemento all <p> en la colección html:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>
HTMLCollection length Property
</h2>
<p>
The length property is used to return the
number of all elements in a HTMLCollection.
</p>
<div>
<p>GeeksForGeeks</p>
<p>A Computer science portal for geeks</p>
</div>
<button onclick="Geeks()">Submit</button>
<!-- l is the HTML collection here -->
<script>
function Geeks() {
var l =
document.getElementsByTagName("P").length;
alert(l);
}
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: para resaltar todos los elementos con clase GFG usando la propiedad de longitud.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>HTMLCollection length Property</h2>
<p>
The length property is used to return the
number of all elements in a HTMLCollection.
</p>
<div>
<p class="GFG">GeeksForGeeks</p>
<p class="GFG">
A Computer science portal for geeks
</p>
</div>
<button onclick="Geeks()">Submit</button>
<!-- w is the HTML collection here -->
<script>
function Geeks() {
var w, c;
w = document.getElementsByClassName("GFG");
for (c = 0; c < w.length; c++) {
w[c].style.backgroundColor = "BLUE";
}
}
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de longitud HTMLCollection se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA