[SOLUCIONADO] propiedad no definida??

alfa18 · #1 (**permalink**) 06/12/2016, 11:50

hola,
estoy intentando añadir un nodo al DOM. Este es el codigo que utilizo:

Código Javascript:

Ver original<script>
function anyadir(){
var f=document.createElement('form');
this.parentNode.appendChild(f);
 
var in1=document.createElement('select');
var opt2=document.createElement('option');
opt.setAttribute('value','España');
var opt1=document.createElement('option');
opt.setAttribute('value','Francia');
...........................
 
<body>
<p class='url' onclick="anyadir()">Pulsa aquí para proceder</p>
</body>

al llegar a la propiedad parentNode me dice que no puede leerla porque parentNode no esta definida¡¡

Supongo k el error se debe a que el objeto this no apunta al elemento "p", pero ¿como hago para que pase la referencia al objeto con la llamada a la funcion anyadir() ?

Lo he revisado varias veces y comparado con otros ejemplos pero no se een que falla:)¿Me podeis echar una mano para sacar el error?

Gracias, saludos:D

mpozo · #2 (**permalink**) 06/12/2016, 13:26

Claro que está indefinido. Piensas que this en ese contexto se refiere al elemento <p>, pero en realidad, se refiere al objeto window. Para que this sea el elemento <p>, debes pasarselo como parámetro a la función ya que la invocación está en línea o registrar el evento con addEventListener. Todo esto se explica aquí

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 anyadir(elem){
                console.log(this);
                console.log(this.parentNode);
                console.log(elem);
            }
        </script>
    </head>
    <body>
        <p class='url' onclick="anyadir(this)">Pulsa aquí para proceder</p>
        <p class='url2'>Pulsa aquí para proceder 2</p>
 
        <script>
            document.querySelector('.url2').addEventListener('click', anyadir, false);
        </script>
    </body>
</html>

alfa18 · #3 (**permalink**) 07/12/2016, 07:20

Muchas gracias

por tu clara respuesta y por tu codigo mpozo, se ve muy claro k efectivamente en invocaciones 'manuales' al evento se debe pasar la referencia al objeto this

Tengo dos dudas respecto a tu codigo. ¿Me podrias explicar?

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?

¿En este ejemplo que hace el 3er parametro 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?

Gracias de nuevo y un saludo:D

mpozo · #4 (**permalink**) 07/12/2016, 14:49

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>

alfa18 · #5 (**permalink**) 09/12/2016, 07:21

Veo k sabes mucho de JS(y lo mejor es que sabes explikar, de eso no hay muchos en este foro

), pero yo estoy empezando, asi que vamos por partes:

Cita:

Iniciado por mpozo

Se trata de versatilidad, ....[/HIGHLIGHT]

te refieres a comodidad de poner IDs y/o clases con el mismo metodo(querySelector)??

Cita:

Iniciado por mpozo

con getElement se obtiene la información cuando se necesita, con querySelector se almacena en el cliente.

¿A que te refieres con eso?No entiendo

, ¿me podrias explicar?

En tu 2º ejemplo,

Cita:

Iniciado por mpozo

el evento se propaga en dos fases - fase de captura y fase de propagación -.

en el codigo del ejemplo el evento se propaga en las dos fases. ¿pork al ejecutarlo solo veo la captura(del padre al hijo) pero no la propagacion(del hijo al padre)?

, no deberia ver además un span-div-body(del hijo al padre)??

mpozo · #6 (**permalink**) 10/12/2016, 07:45

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

alfa18 · #7 (**permalink**) 11/12/2016, 15:44

Cita:

Iniciado por mpozo

Los nodeList pueden estar vivos o ser estáticos. Los getElement retornan colecciones vivas, mientra que querySelector retorna colecciones estáticas.

OK, asi da gusto con gente que sabe esxplicar

Gracias por tus ejemplos, se entienden perfectamente

Cita:

Iniciado por mpozo

En el momento en que omitas o cambies el 3º parámetro a false lo obtendrás

me refiero sin cambiar a false el valor del parametro, es decir 6 lineas con true(body-div-span + span-div-body) y 3 para false(span-div-body), por tu anterior post me parecio que al dar true al parametro se daban las dos fases juntas(captura+ propagacion), pero ¿no es mas bien que el evento se propaga en UNA Y SOLO UNA DE ESTAS DOS(no se dan las dos a la vez con true) dos fases, captura o propagacion??

mpozo · #8 (**permalink**) 12/12/2016, 07:53

Tienes razón, de mis palabras se puede deducir esa conclusión.

El 3º parámetro es useCapture, un boleano (true/false). En el proceso interno de addEventListener se te pregunta; ¿Quieres que se inicie la fase de captura? Y tú respuesta es

true --> sí
false (omitido) --> no

En caso que la respuesta sea no, no se inicia la fase de captura, sino la fase de burbuja.
La única opción para que ambas fases concurran en un mismo elemento es que tengan distintos eventos o distinto parámetro de captura. Siguiendo el ejemplo anterior

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);
 
                document.querySelector('body').addEventListener('click', foo);
                document.querySelector('div').addEventListener('click', foo);
                document.querySelector('span').addEventListener('click', foo);
 
            });
        </script>
    </head>
    <body>
 
        <div>
            <span>Pulsame</span>
        </div>
 
    </body>
</html>

alfa18 · #9 (**permalink**) 22/12/2016, 06:10

OK

, la verdad es que asi tiene mas sentido asi(que el 3er parametro 'pregunte el sentido' de propagacion del evento), simplemente lo entendi mal

Gracias por tu ayuda @mpozo, saludos:D