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

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.  Alerta 

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).

Ejemplo de código

En este ejemplo, agregamos un detector de eventos de clic llamado foo a la etiqueta HTML.

 Haz click en mi 

 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'); 

Cómo elegir los auriculares perfectos (2017)

Lo admitamos o no, algunos de nosotros siempre estamos comprando auriculares nuevos. Otros simplemente se frustran con un par de auriculares que simplemente están mal para ellos . Sin embargo, los auriculares realmente pueden ser inversiones de una sola vez, especialmente con las etiquetas de precios que vienen.

(Consejos de tecnología y diseño)

20 impresionantes cargadores animados y hilanderos

La conexión a Internet es cada vez más rápida, sin embargo, de vez en cuando, aún hay algunos momentos en los que debemos esperar a que se cargue una página web. Los diseñadores hacen todo lo posible para que su tiempo de espera sea divertido e indolora utilizando varios cargadores animados y creativos .Los c

(Consejos de tecnología y diseño)



Artículos De Interés

Cree, envíe y administre facturas sin esfuerzo con los libros de cuentas

YouTube ingresa al espacio de la televisión con YouTube TV

Tiny Hands: la fuente gratuita inspirada en la letra de Donald Trump

Google comienza a implementar Ok Google support para Android Auto