Página principal » Codificación » 15 métodos de JavaScript para la manipulación de DOM para desarrolladores web

    15 métodos de JavaScript para la manipulación de DOM para desarrolladores web

    Como desarrollador web, con frecuencia necesitas manipular el DOM, El modelo de objetos que utilizan los navegadores para especifique la estructura lógica de páginas web, y en base a esta estructura para renderizar elementos HTML en la pantalla.

    HTML define el estructura DOM por defecto. Sin embargo, en muchos casos es posible que desee manipular esto con JavaScript, generalmente para añadir funcionalidades extra a un sitio.

    IMAGEN: Desarrolladores de Google

    En este post, encontrarás una lista de 15 métodos básicos de JavaScript ese ayuda a la manipulación de DOM. Es probable que utilice estos métodos con frecuencia en su código, y también los encontrará en nuestros tutoriales de JavaScript..

    1. querySelector ()

    los querySelector () método devuelve el primer elemento que coincide con uno o más selectores de CSS. Si no se encuentra ninguna coincidencia, devuelve nulo.

    antes de querySelector () fue introducido, los desarrolladores utilizaron ampliamente el getElementById () método que obtiene un elemento con un especificado carné de identidad valor.

    A pesar de que getElementById () Sigue siendo un método útil, pero con el más nuevo. querySelector () y querySelectorAll () métodos de los que somos libres elementos de destino basados ​​en cualquier selector de CSS, Así tenemos más flexibilidad..

    Sintaxis
    var ele = document.querySelector (selector);
    • ele - Primer elemento coincidente o nulo (si ningún elemento coincide con los selectores)
    • selector - uno o más selectores de CSS, tales como "#foId", ".fooClassName", ".class1.class2", o ".clase1, .clase2"
    Ejemplo de código

    En este ejemplo, la primera

    se selecciona con el querySelector () Método y su color se cambia a rojo..

     
    párrafo uno
     
    párrafo dos
     
    div uno
     
    párrafo tres
     
    div dos
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rojo';
    Demostración interactiva

    Prueba el querySelector () Método en la siguiente demostración interactiva. Simplemente escriba un selector que coincida con los que puede encontrar dentro de los cuadros azules (por ejemplo,. #Tres), y haga clic en el botón Seleccionar. Tenga en cuenta que si escribe .bloquear, solo su primera instancia será seleccionado.

    2. querySelectorAll ()

    diferente a querySelector () que devuelve sólo la primera instancia de todos los elementos coincidentes, querySelectorAll () devuelve todos los elementos que coinciden con el selector CSS especificado.

    Los elementos coincidentes se devuelven como un NodeList objeto que será un objeto vacío si no se encuentran elementos coincidentes.

    Sintaxis
    var eles = document.querySelectorAll (selector);
    • eles - UNA NodeList Objeto con todos los elementos coincidentes como valores de propiedad. El objeto está vacío si no se encuentran coincidencias.
    • selector - uno o más selectores de CSS, tales como "#foId", ".fooClassName", ".class1.class2", o ".clase1, .clase2"
    Ejemplo de código

    El siguiente ejemplo utiliza el mismo HTML que el anterior. Sin embargo, en este ejemplo, todos los párrafos se seleccionan con querySelectorAll (), y son de color azul.

     
    párrafo uno
     
    párrafo dos
     
    div uno
     
    párrafo tres
     
    div dos
     
     var párrafos = document.querySelectorAll ('p'); para (var p de párrafos) p.style.color = 'azul';

    3. addEventListener ()

    Eventos refiérase a lo que le sucede a un elemento HTML, como hacer clic, enfocar o cargar, a lo que podemos reaccionar con JavaScript. Podemos asignar funciones JS a escucha para estos eventos en elementos y hacer algo cuando el evento haya ocurrido.

    Hay tres maneras en que puedes asignar una función a un determinado evento.

    Si foo () Es una función personalizada, puedes registrarla. como un detector de eventos de clic (Llámelo cuando se haga clic en el elemento del botón) de tres maneras:

    1.  
    2.  var btn = document.querySelector ('button'); btn.onclick = foo;
    3.  var btn = document.querySelector ('button'); btn.addEventListener ('clic', foo);

    El método addEventListener () (la tercera solución) tiene algunos pros; Es el último estándar, que permite la asignación de más de una función como oyentes de eventos a un evento, y viene con un conjunto útil de opciones..

    Sintaxis
    ele.addEventListener (evt, listener, [opciones]);
    • ele - El elemento HTML que el detector de eventos escuchará..
    • Evt - El evento apuntado.
    • oyente - Normalmente, una función de JavaScript.
    • opciones - (Opcional) Un objeto con un conjunto de propiedades booleanas (enumeradas a continuación).
    Opciones Lo que sucede, cuando se establece en cierto?
    capturar

    Detiene la propagación de eventos, es decir, evita la llamada de cualquier detector de eventos para el mismo tipo de evento en los antepasados ​​del elemento.

    Para usar esta característica, puedes usar 2 sintaxis:

    1. ele.addEventListener (evt, listener, true)
    2. ele.addEventListener (evt, listener, capture: true);
    una vez

    Se escucha al oyente solo la primera vez que ocurre el evento, luego se desconecta automáticamente del evento y ya no se activará..
    pasivo

    La acción predeterminada del evento no se puede detener con el método preventDefault ().
    Ejemplo de código

    En este ejemplo, agregamos un detector de eventos de clic llamado foo, al 

     var btn = document.querySelector ('button'); btn.addEventListener ('clic', foo); función foo () alerta ('hola');
    Demostración interactiva

    Asignar el foo () función personalizada como detector de eventos para cualquiera de los tres eventos siguientes: entrada, hacer clic o ratón sobre & dispara el evento elegido en el campo de entrada inferior moviendo el mouse, haciendo clic o escribiendo en él.

    4. removeEventListener ()

    los removeEventListener () método separa a un oyente de eventos añadido previamente con el addEventListener () método del evento que está escuchando..

    Sintaxis
    ele.removeEventListener (evt, listener, [opciones]);

    Utiliza la misma sintaxis que la mencionada. addEventListener () método (excepto para el una vez opción que está excluida). Las opciones suelen ser muy específicas para identificar al oyente que se va a separar..

    Ejemplo de código

    Siguiendo el Ejemplo de Código que usamos en addEventListener (), Aquí eliminamos el detector de eventos de clic llamado foo desde el