Cita:
Iniciado por alfa18 A la hora de seleccionar un objeto del DOM, veo k utilizas el metodo querySelector¿cuando usar uno u otro(getElementByyClassName)o son completamente iguales? ¿alguna diferencia/ventaja entre los distintos metodos de seleccion (por CSS/ID/name/clase)?
mediante queySelector podriamos seleccionar cualquier objeto DOM(ID/tag/name/class),¿porque los otros metodos si este(querySelector) "se come" a todos?
Se trata de versatilidad, no de rapidez de ejecución o por que sobrecarge menos. De hecho, mientras que con getElement se obtiene la información cuando se necesita, con querySelector se almacena en el cliente.
Un ejemplo básico de su versatilidad
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>
document.addEventListener('DOMContentLoaded', function() {
console.log(document.querySelector('.yes, #no').textContent);
console.log(document.querySelector('.yes1, #no').innerHTML);
console.log(document.querySelector('.yes, #no1'));
console.log(document.querySelector('.yes1, #no1'));
console.log(document.querySelector('input[name="numero"]'));
}, false);
</script>
</head>
<body>
<div class="si yes">texto 1</div>
<div id="no">texto 2 <input value="0" name="numero"></div>
<div class="si yes">texto 1</div>
</body>
</html>
Cita:
Iniciado por alfa18 ¿En este ejemplo que hace el 3er parámetro del método addEventListener? se que el valor false activa el "bubling" de eventos pero en este caso no tiene mucho sentido al no haber una jerarquia de eventos,¿no?
Como sabes cuando se produce el evento sobre el elemento, el evento se propaga en dos fases - fase de captura y fase de propagación -. La fase de captura va desde el elemento padre hasta elemento hijo - donde se produjo el evento - y la fase de propagación va desde el elemento hijo - donde se produjo el evento - hasta el elemento padre. Con el parámetro de captura se controla la primera fase.
Por defecto el parámetro es false. Omitiendo este parámetro o declararlo como false, podemos saltar la fase de captura.
Si ejecutas este ejemplo y después omites el tercer parámetro o lo estableces a false, comprobarás lo que te explico
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 foo(){
console.log(this);
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('body').addEventListener('click', foo, true);
document.querySelector('div').addEventListener('click', foo, true);
document.querySelector('span').addEventListener('click', foo, true);
});
</script>
</head>
<body>
<div>
<span>Pulsame</span>
</div>
</body>
</html>