es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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

Como desarrollador web, con frecuencia necesita manipular el DOM, el modelo de objetos que utilizan los navegadores para especificar la estructura lógica de las páginas web, y en función de esta estructura para representar elementos HTML en la pantalla .

HTML define la estructura DOM por defecto . Sin embargo, en muchos casos es posible que desee manipular esto con JavaScript, por lo general con el fin de agregar funcionalidades adicionales a un sitio.

En esta publicación, encontrará una lista de 15 métodos básicos de JavaScript que ayudan a la manipulación 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()

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

Antes de que se introdujera querySelector(), los desarrolladores utilizaron ampliamente el método getElementById() que busca un elemento con un valor de id . Especificado .

Aunque getElementById() sigue siendo un método útil, pero con los querySelector() y querySelectorAll() más nuevos, querySelector() querySelectorAll() libremente elementos basados ​​en cualquier selector de CSS, por lo que tenemos más flexibilidad.

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

En este ejemplo, el primero

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

párrafo uno

párrafo dos

div uno

párrafo tres

div dos
 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; 
Demostración interactiva

Pruebe el método querySelector() en la siguiente demostración interactiva. Simplemente escriba un selector que coincida con los que puede encontrar dentro de los cuadros azules (por ejemplo, #three ), y haga clic en el botón Seleccionar. Tenga en cuenta que si escribe .block, solo se seleccionará su primera instancia .

2. querySelectorAll()

A diferencia de querySelector() que solo devuelve la primera instancia de todos los elementos coincidentes, querySelectorAll() devuelve todos los elementos que coinciden con el selector de CSS especificado .

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

Sintaxis
 var eles = document.querySelectorAll (selector); 
  • eles - Un objeto NodeList 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, como "#fooId", ".fooClassName", ".class1.class2" o ".class1, .class2"
Ejemplo de código

El siguiente ejemplo usa 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'); for (var p de párrafos) p.style.color = 'blue'; 

3. addEventListener()

Los eventos se refieren a lo que sucede con un elemento HTML, como hacer clic, enfocar o cargar, a lo que podemos reaccionar con JavaScript. Podemos asignar funciones JS para escuchar estos eventos en elementos y hacer algo cuando el evento haya ocurrido.

Hay tres formas de asignar una función a un determinado evento.

Si foo() es una función personalizada, puede registrarla como un detector de eventos de clic (llamar cuando se hace clic en el elemento del botón) de tres maneras:

  1.   
  2.  var btn = document.querySelector ('botón'); btn.onclick = foo; 
  3.  var btn = document.querySelector ('botón'); btn.addEventListener ('click', 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 útil conjunto de opciones.

Sintaxis
 ele.addEventListener (evt, listener, [opciones]); 
  • ele : elemento HTML que escuchará el evento.
  • evt : el evento específico.
  • listener : por lo general, una función de JavaScript.
  • options - (opcional) Un objeto con un conjunto de propiedades booleanas (enumeradas a continuación).
Opciones¿Qué sucede cuando se establece en true ?
capture

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

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

  1. ele.addEventListener(evt, listener, true)
  2. ele.addEventListener(evt, listener, {capture:true});
once

El oyente es llamado solo la primera vez que ocurre el evento, luego se separa automáticamente del evento y ya no se activará más.

passive

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 a la etiqueta HTML.

  
 var btn = document.querySelector ('botón'); btn.addEventListener ('click', foo); función foo () {alerta ('hola'); } 
Demostración interactiva

Asigne la función personalizada foo() como un detector de eventos a cualquiera de los tres eventos siguientes: input, click o mouseover y desencadenar el evento elegido en el campo de entrada inferior colocando, haciendo clic o escribiendo en él.

4. removeEventListener()

El método removeEventListener() separa un detector de eventos agregado previamente con el método addEventListener() del evento que está escuchando .

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

Utiliza la misma sintaxis que el método addEventListener() mencionado anteriormente (excepto para la opción de once que está excluida). Las opciones se utilizan para ser muy específicas sobre la identificación del oyente para ser separado.

Ejemplo de código

Siguiendo el ejemplo de código que utilizamos en addEventListener(), aquí eliminamos el oyente de evento click llamado foo del elemento.

 btn.removeEventListener ('clic', foo); 

5. createElement()

El método createElement() crea un nuevo elemento HTML utilizando el nombre de la etiqueta HTML que se creará, como 'p' o 'div' .

Luego puede agregar este elemento a la página web usando diferentes métodos para la inserción DOM, como AppendChild() (vea más adelante en esta publicación).

Sintaxis
 document.createElement (tagName); 
  • tagName : el nombre de la etiqueta HTML que desea crear.
Ejemplo de código

Con el siguiente ejemplo, puede crear un nuevo elemento de párrafo:

 var pEle = document.createElement ('p') 

6. appendChild()

El método appendChild() agrega un elemento como el último elemento secundario al elemento HTML que invoca este método.

El niño que se insertará puede ser un elemento creado recientemente o uno ya existente . En este último caso, se moverá de su posición anterior a la posición del último niño.

Sintaxis
 ele.appendChild (childEle) 
  • ele : el elemento HTML al que se agrega childEle como último hijo.
  • childEle - El elemento HTML agregado como el último elemento secundario de ele .
Ejemplo de código

En este ejemplo, insertamos un elemento es como el hijo de un

Elemento que utiliza appendChild() y los métodos createElement() antes mencionados.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Hola'; div.appendChild (fuerte); 
Demostración interactiva

En la siguiente demostración interactiva, las letras de #a a #r son los elementos secundarios de los selectores de identificación #parent-one, #parent-two y #parent-three .

Compruebe cómo funciona el método appendChild() escribiendo un nombre de selector primario y secundario en los campos de entrada a continuación. También puede elegir niños que pertenecen a otro padre.

7. removeChild()

El método removeChild() elimina un elemento secundario especificado del elemento HTML que llama a este método.

Sintaxis
 ele.removeChild (childEle) 
  • ele : elemento principal de childEle .
  • childEle - El elemento hijo de ele .
Ejemplo de código

En este ejemplo, eliminamos el elemento que agregamos como un niño a la

etiqueta en el ejemplo de código para el appendChild() anterior appendChild() .

 div.removeChild (fuerte); 

8. replaceChild()

El método replaceChild() reemplaza un elemento hijo con otro perteneciente al elemento padre que llama a este método.

Sintaxis
 ele.replaceChild (newChildEle, oldChileEle) 
  • ele - Elemento principal del cual los niños deben ser reemplazados.
  • newChildEle - Elemento hijo de ele que reemplazará oldChildEle .
  • oldChildEle - Elemento hijo de ele, que será reemplazado por newChildEle .
Ejemplo de código

En este ejemplo, el elemento hijo que pertenece a

el elemento padre se reemplaza con una etiqueta recién creada.

Hola
 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hola'; div.replaceChild (em, strong); 

9. cloneNode()

Cuando tiene que crear un nuevo elemento que debe ser igual a un elemento ya existente en la página web, simplemente puede crear una copia del elemento ya existente utilizando el método cloneNode() .

Sintaxis

var dupeEle = ele.cloneNode([deep])

  • dupeEle - Copia del elemento ele .
  • ele : el elemento HTML que se copiará.
  • deep - (opcional) Un valor booleano. Si se establece en true, dupeEle tendrá todos los elementos hijos ele, si se establece en false se clonará sin sus elementos secundarios.
Ejemplo de código

En este ejemplo, creamos una copia para el elemento con cloneNode(), luego lo agregamos al

etiqueta como un elemento secundario con el método appendChild() mencionado appendChild() .

Como resultado,

contendrá dos elementos, ambos con la cadena de hello como contenido.

Hola
 var strong = document.querySelector ('strong'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (copy); 

10. insertBefore()

El método insertBefore() agrega un elemento secundario especificado antes de otro elemento secundario . El método es llamado por el elemento padre.

Si el elemento secundario al que se hace referencia no existe o pasa explícitamente null en su lugar, el elemento secundario que se insertará se agregará como el último elemento secundario del elemento principal (similar a appendChild() ).

Sintaxis
 ele.insertBefore (newEle, refEle); 
  • ele - Elemento padre.
  • newEle - Nuevo elemento HTML para insertar.
  • refEle - Elemento hijo de ele antes de que se inserte newEle .
Ejemplo de código

En este ejemplo, creamos un nuevo elemento con texto dentro y lo agregamos antes del elemento dentro del

elemento padre

Hola
 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hola'; div.insertBefore (em, strong); 
Demostración interactiva

Esta demostración interactiva funciona de manera similar a nuestra demostración anterior perteneciente al método appendChild() . Aquí solo debe escribir los selectores de id de dos elementos secundarios (de #a a #r ) en los cuadros de entrada, y puede ver cómo el método insertBefore() mueve el primer elemento secundario especificado antes del segundo.

11. createDocumentFragment()

El método createDocumentFragment() puede no ser tan conocido como los otros en esta lista, sin embargo es importante, especialmente si desea insertar múltiples elementos a granel, como agregar varias filas a una tabla.

Crea un objeto DocumentFragment, que esencialmente es un nodo DOM que no es parte del árbol DOM . Es como un búfer donde podemos agregar y almacenar otros elementos (por ejemplo, varias filas) primero, antes de agregarlos al nodo deseado en el árbol DOM (por ejemplo, a una tabla).

¿Por qué no simplemente agregamos elementos directamente al árbol DOM? Debido a que la inserción de DOM causa cambios en el diseño, y es un proceso de navegador costoso ya que las múltiples inserciones de elementos consecuentes causarán más cambios de diseño.

Por otro lado, agregar elementos a un objeto DocumentFragment no causa ningún cambio de diseño, por lo que puede agregar tantos elementos como desee antes de pasarlos al árbol DOM, lo que provoca un cambio de diseño solamente en este punto.

Sintaxis
 document.createDocumentFragment () 
Ejemplo de código

En este ejemplo, creamos múltiples filas y celdas de tabla con el método createElement(), luego las agregamos a un objeto DocumentFragment, finalmente agregamos ese fragmento de documento a un HTML

usando el método appendChild() .

Como resultado, se insertarán cinco filas, cada una de las cuales contiene una celda con un número del 1 al 5 como contenido, dentro de la tabla.

 var table = document.querySelector ("tabla"); var df = document.createDocumentFragment (); for (var i = 0; i <5; i ++) {var td = document.createElement ("td"); var tr = document.createElement ("tr"); td.textContent = i; tr.appendChild (td) df.appendChild (tr); } table.appendChild (df); 

12. getComputedStyle()

Algunas veces desea verificar los valores de las propiedades CSS de un elemento antes de realizar cambios. Puede usar la propiedad ele.style para hacer lo mismo; sin embargo, el método getComputedStyle() se ha creado solo para este propósito, devuelve los valores calculados de solo lectura de todas las propiedades CSS de un elemento HTML especificado.

Sintaxis
 var style = getComputedStyle (ele, [pseudoEle]) 
  • style - Un objeto CSSStyleDeclaration devuelto por el método. Tiene todas las propiedades CSS y sus valores del elemento ele .
  • ele : elemento HTML de los valores de propiedad de CSS que se obtienen.
  • pseudoEle - (opcional) Una cadena que representa un pseudo-elemento (por ejemplo, ':after' ). Si se menciona esto, se devolverán las propiedades de CSS del pseudo-elemento especificado asociado con ele .
Ejemplo de código

En este ejemplo, obtenemos y alertamos el valor de width calculado de un

elemento utilizando el método getComputedStyle() .

 var style = getComputedStyle (document.querySelector ('div')); alerta (style.width); 

13. setAttribute()

El método setAttribute() agrega un nuevo atributo a un elemento HTML o actualiza el valor de un atributo que ya existe.

Sintaxis
 ele.setAttribute (nombre, valor); 
  • ele : el elemento HTML al que se agrega un atributo o cuyo atributo se actualiza.
  • name - El nombre del atributo.
  • value - El valor del atributo.
Ejemplo de código

En este ejemplo, agregamos el atributo contenteditable a un

haciendo uso del método setAttribute(), que hará que su contenido sea editable.

Hola
 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', '') 

14. getAttribute()

El método getAttribute() devuelve el valor de un atributo específico que pertenece a un determinado elemento HTML.

Sintaxis
 ele.getAttribute (nombre); 
  • ele : el elemento HTML del atributo que se solicita.
  • name - El nombre del atributo.
Ejemplo de código

En este ejemplo, alertamos el valor del atributo contenteditable pertenece al

elemento con la ayuda del método getAttribute() .

Hola
 var div = document.querySelector ('div'); alerta (div.getAttribute ('contenteditable')) 

15. removeAttribute()

El método removeAttribute() elimina un atributo dado de un elemento HTML específico.

Sintaxis

ele.removeAttribute(name);

  • ele : el elemento HTML del atributo que se debe eliminar.
  • name - El nombre del atributo.
Ejemplo de código

En este ejemplo, eliminamos el atributo contenteditable del

elemento. Como resultado, el
no será editable más.

Hola
 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

Hover.css - Biblioteca CSS3 con más de 40 efectos de desplazamiento

Hover.css - Biblioteca CSS3 con más de 40 efectos de desplazamiento

Cuando se trata de tratar de atraer la atención de los usuarios, hay muchas maneras de lograrlo. Para casos especiales, el vuelo estacionario es una excelente manera de llamar la atención sobre un enlace o botón. Normalmente, el control deslizante funciona cambiando el color del elemento o el estado del degradado cuando los usuarios mueven sus cursores sobre él. Pe

(Consejos de tecnología y diseño)

Cree presentaciones interactivas en todos los dispositivos con Swipe.to

Cree presentaciones interactivas en todos los dispositivos con Swipe.to

A veces, puede ser un desafío tratar de mantener la atención de las personas durante una presentación, independientemente de si el contenido es interesante o no. Ahora vivimos en un mundo tan acelerado y las personas tienen periodos de atención más cortos; Las diapositivas de Powerpoint ya no van a cortar más.Lo qu

(Consejos de tecnología y diseño)