Quizá puede ser interesante ver lo que estás seleccionado para poder comprender lo que pasa.
Primero haces esto:
var li = nombres.querySelectorAll("li.collection-item");
Si imprimimos en la consola con console.log(li);
obtendremos:
{
"0": <li class="collection-item">…</li>,
"1": <li class="collection-item">…</li>,
"2": <li class="collection-item">…</li>,
"3": <li class="collection-item">…</li>,
"length": 4,
"item": function item() {
[native code]
},
"entries": function entries() {
[native code]
},
"forEach": function forEach() {
[native code]
},
"keys": function keys() {
[native code]
},
"values": function values() {
[native code]
}
}
Esto "0": <li class="collection-item">…</li>
... expresa que están todos tus li
incluyendo los anchor tags. Y ya eso nos hace pensar que refinando un poco más la selección podremos alcanzar los anchor tags sin dar tantas vueltas (ver solución propuesta al final).
Bien, bien.
Luego, en tu lógica vas a recorrer todos tus li
, para encontrar los anchor tag que hay en ellos mediante: let a = li[i].getElementsByTagName('a')[0];
ojo, ese código corre dentro de un bucle que va iterando sobre la lista de li
. El resultado si lo imprimimos en consola, es este:
<a href="#">Abe</a>
<a href="#">Adan</a>
<a href="#">Ana</a>
<a href="#">Abram</a>
Estamos pues ante cada elemento a
, pero no tenemos el texto que éste contiene, porque getElementsByTagName
devuelve:
... una HTMLCollection
en vivo de elementos con el nombre de
etiqueta dado.
Una HTMLCollection
es definida como:
La interfaz HTMLCollection
representa una colección genérica (objeto
tipo array similar a arguments) de elementos (en orden de documento) y
ofrece métodos y propiedades para seleccionarlos de la lista.
Si quitamos el índice 0
, veremos en efecto una HTMLCollection
. Si imprimimos let a = li[i].getElementsByTagName('a');
, obtenemos:
{
"0": <a href="#">Abe</a>,
"length": 1,
"item": function item() {
[native code]
},
"namedItem": function namedItem() {
[native code]
}
}
{
"0": <a href="#">Adan</a>,
"length": 1,
"item": function item() {
[native code]
},
"namedItem": function namedItem() {
[native code]
}
}
{
"0": <a href="#">Ana</a>,
"length": 1,
"item": function item() {
[native code]
},
"namedItem": function namedItem() {
[native code]
}
}
{
"0": <a href="#">Abram</a>,
"length": 1,
"item": function item() {
[native code]
},
"namedItem": function namedItem() {
[native code]
}
}
O sea, en el índice 0
tienes el elemento anchor
en sí, pero no el dato que hay dentro de él.
Si quieres seleccionar el texto directamente, puedes hacer esto dentro del bucle:
let a = li[i].getElementsByTagName('a')[0].text;
o
let a = li[i].getElementsByTagName('a')[0].textContent;
o
let a = li[i].getElementsByTagName('a')[0].innerHTML;
PERO esto no funcionará correctamente si hubiera más de un elemento <a>
en alguno de lo li
, porque getElementsByTagName
lo que hace es devolver una colección de elementos con ese tag indexados a manera de array. En ese caso, para acceder al texto de un hipotético segundo anchor tendrás que irlo a buscar de este modo li[i].getElementsByTagName('a')[1]
. En cambio, con querySelectorAll
del modo indicado a continuación, son alcanzados todos los elementos <a>
que existan en los li
.
En resumen y ... Propuesta de solución
Que estás mareando demasiado las cosas, que estás dando demasiadas vueltas, que estás mezclando criterios de selección (generalmente, cuando usas querySelectorAll
no necesitas combinarlo con getElementsBy*
).
¿Por qué no hacer algo así, sencillamente?:
filtrarNombres();
function filtrarNombres() {
var ul = document.getElementById("nombres");
var allAnchors = nombres.querySelectorAll("li.collection-item a");
allAnchors.forEach(function(elem) {
console.log(elem.text.toUpperCase());
});
}
<ul id="nombres" class="collection with-header">
<li class="collection-header">
<h5>A</h5>
</li>
<li class="collection-item">
<a href="#">Abe</a>
</li>
<li class="collection-item">
<a href="#">Adan</a>
</li>
<li class="collection-item">
<a href="#">Ana</a>
</li>
<li class="collection-item">
<a href="#">Abram</a>
</li>