0

Estoy siguiendo un tutorial dónde, entre otras cosas, dentro de una función se quiere obtener el valor de cada < li > dentro de un < ul >

<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>

Concretamente se quiere obtener los nombres (Abe, Adan, Ana, Abram) para luego hacer algo con ellos.

El tutorial sigue estos pasos (los comentarios los he añadido yo para que se entienda mi duda mejor)

function filtrarNombres(){
  var ul = document.getElementById("nombres");
   // ↓ Aquí saca los <li> correcto?
  var li = nombres.querySelectorAll("li.collection-item");
  
  for (let i = 0; i < li.length; i++){
  // ↓Aquí al específicar [0] ya ha sacado el nombre de cada <a>,no?
  let a = li[i].getElementsByTagName('a')[0];
  // ↓ Entonces por qué aquí tiene que decir "innerHTML" de cada <a>
  if(a.innerHTML.toUpperCase().indexOf(filtroNombre)){

        } else {

        }
  

Podéis Ignorar lo demás de UpperCase y indexOf, en lo que estoy confuso es en por qué hay que especificar innerHTML si supuestamente el "li[i].getElementsByTagName('a')[0];" ya debería haber sacado el nombre.

4 respuestas 4

2

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>

1

li[i].getElementsByTagName('a')[0] devuelve un Elemento (no confundir con un Nodo), en este caso, de tipo Anchor.

En este caso, estás recogiendo todos los elementos a de ese li y, especificando el índice [0], recoges el primero de esos elementos. Por lo que estás tratando con un elemento. A partir de este punto, si quieres recoger o setear su contenido html, puedes usar .innerHTML. Si quieres recoger o setear únicamente el texto plano del elemento, puedes usar .innerText.

0

Con la función getElementsByTagName() lo que obtienes es un array con los elementos que le pases como parámetro a la función. A través de ese elemento puedes acceder a sus atributos, propiedades y contenido. Al igual que usarías la función getAttribute() para obtener, por ejemplo, el href de la etiqueta <a>, también debes especificar que lo que quieres obtener del elemento es el contenido HTML. Para ello se usa la propiedad innerHTML

Referencias: innerHTML, getElementsByTagName()

0

Correcto , eso li[i].getElementsByTagName('a')[0]; ya saca el elemento a con el nombre que buscas . Pero eso if no hace eso sino que para lo que sirve ese if es para aplicar un filtro a eso nombre . Con la función indexOf evalúas si existe un caracter en mayusculas filtroNombre en ese nombre . Es decir si por ejemplo filtroNombre ='N' entonces en el if solo entraran los nombres que tengan una n o N

var ul = document.getElementById("nombres");
// ↓ Aquí saca los <li> correcto?
var li = nombres.querySelectorAll("li.collection-item");
var filtroNombre = 'N';
for (let i = 0; i < li.length; i++) {
  // ↓Aquí al específicar [0] ya ha sacado el nombre de cada <a>,no?
  let a = li[i].getElementsByTagName('a')[0];
  // ↓ Entonces por qué aquí tiene que decir "innerHTML" de cada <a>
  console.log(a.innerHTML);
  if (a.innerHTML.toUpperCase().indexOf(filtroNombre) != -1) {
    console.log('TRUE ');
  } else {
    console.log('FASLE ');
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.