Documento.querySelector()

El método Document querySelector() devuelve el primer WebElement dentro del documento que coincide con el selector o grupo de selectores especificado. Si no se encuentran coincidencias, se devuelve null .

Nota : la coincidencia se realiza mediante un recorrido de orden previo en profundidad de los nodos del documento, comenzando con el primer elemento en el marcado del documento y recorriendo los nodos secuenciales por orden del número de nodos secundarios.

Sintaxis:

 element = document.querySelector(selectors);

Documento.querySelectorAll()

El método Document querySelectorAll() devuelve una NodeList estática que representa una lista de los elementos del documento que coinciden con el grupo de selectores especificado.

Nota : Aunque NodeList no es un Array , es posible iterarlo con forEach() . También se puede convertir en un Array real usando Array.from() . Sin embargo, algunos navegadores antiguos no han implementado NodeList.forEach() ni Array.from() . Esto se puede eludir usando Array.prototype.forEach() .

Sintaxis:

 elementList = parentNode.querySelectorAll(selectors);

Usando CssSelector

Mientras que usar xpath o css-selectors devolvería una lista de los elementos del documento que coinciden con el grupo especificado de selectores.

Conclusión

Como se discutió anteriormente, cuando usa querySelector() solo se devuelve el primer elemento coincidente. Si su caso de uso es devolver todo el elemento coincidente, debe usar querySelectorAll() como:

 document.querySelector("div[slot^='Learner']>div>div>span")

tienes que usar

 document.querySelectorAll();