Cita:
Iniciado por alfa18 te refieres a comodidad de poner IDs y/o clases con el mismo metodo(querySelector)??
Sí, es un método muy potente
Cita:
Iniciado por alfa18 ¿A que te refieres con eso?No entiendo
, ¿me podrias explicar?
Los nodeList pueden estar vivos o ser estáticos. Los getElement retornan colecciones vivas, mientra que querySelector retorna colecciones estáticas. ¿Qué quiere decir esto? Pues que querySelector almacena en el cliente el nodeList y aunque este varíe su largo, no será detectado. Los getElement sí detecta el cambio.
Con este ejemplo podemos observarlo
Código Javascript
:
Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<style>
</style>
<script>
function isNodelistLive(nList) {
var body = document.getElementsByTagName('body')[0],
largo1 = nList.length,
clon = nList.item(0).cloneNode();
body.appendChild(clon);
var largo2 = nList.length;
return largo1 !== largo2;
//return (largo1 + ' - ' + largo2);
}
</script>
</head>
<body>
<input type="text" class="input" name="input">
<script>
var gEBTN = document.getElementsByTagName('input'),
gEBCN = document.getElementsByClassName('input'),
gEBN = document.getElementsByName('input'),
qSA = document.querySelectorAll('.input');
console.log(isNodelistLive(gEBTN)); // true (1 - 2)
console.log(isNodelistLive(gEBCN)); // true (2 - 3)
console.log(isNodelistLive(gEBN)); // true (3 - 4)
console.log(isNodelistLive(qSA)); // false (1 - 1)
</script>
</body>
</html>
Este código hace que cada vez que es invocada la función, clona el elemento <input> y retorna true o false arreglo a si el largo del nodeList es igual o desigual al largo del nodeList una vez clonado el elemento. Si después comentas el primer return y descomentas el segundo, verás que los getElement leen el nuevo largo del nodeList, mientras que el largo que retorna querySelector siempre es 1
Cita:
Iniciado por alfa18 no deberia ver además un span-div-body(del hijo al padre)??
En el momento en que omitas o cambies el 3º parámetro a false lo obtendrás