Manipulando DOM en WordPress usando JQuery

Gracias a la plataforma de código abierto de WordPress y la vibrante comunidad de desarrolladores, la creación de temas para la plataforma tiene un gran atractivo. Sin embargo, navegar por todos los elementos y el contenido necesarios para crear un sitio de WordPress puede ser un desafío, dependiendo de su conocimiento y experiencia en programación.

Afortunadamente, el modelo de objetos de documento (DOM) puede facilitar la manipulación o el viaje a través del código HTML de un sitio. El DOM funciona al permitirle crear un árbol compuesto por varios nodos u objetos. Esto abre la oportunidad de cambiar la visualización, la estructura o la función del sitio, utilizando bibliotecas de JavaScript como jQuery.

En este artículo, explicaremos qué es el DOM y por qué es posible que desee usarlo. Luego proporcionaremos algunas técnicas estándar de manipulación de jQuery para usar el DOM con WordPress. ¡Vamos a sumergirnos!

¿Qué es el DOM?

En pocas palabras, el DOM es una interfaz de programación de aplicaciones (API) para HTML. Crea un árbol de objetos que representa el contenido y la estructura de una página web. También es una plataforma y un script independiente del idioma, lo que lo hace bastante versátil. Cuando el DOM representa el código fuente HTML de esta manera, lo hace accesible para que varios lenguajes de programación puedan conectarse a él.

¿Por qué usar el DOM?

Como usuario de WordPress, es probable que vea el DOM en acción cada vez que encuentre interactividad dinámica. Esto podría incluir cuando se devuelve un error si se envía un formulario con información faltante. Los controles deslizantes de contenido son otro ejemplo del DOM en uso:

Los desarrolladores pueden usar el DOM para actualizar y cambiar casi todos los elementos de una página web. Puede usarlo para crear documentos y navegar por su estructura. El DOM también se puede usar para agregar, modificar o eliminar elementos y objetos.

Manipulación de DOM con JQuery

Para ser claros, el DOM y el HTML no son lo mismo, aunque deberían contener los mismos elementos. El DOM es una representación modelada del código fuente HTML y puede modificarse mediante JavaScript del lado del cliente.

A continuación, veremos métodos en la biblioteca jQuery para probar algunas técnicas de manipulación de DOM. Tenga en cuenta que los diferentes navegadores manejan el DOM a su manera, pero no tiene que hacer nada especial para comenzar a usarlo. Todos los navegadores usan alguna forma de DOM para hacer que las páginas sean accesibles para JavaScript.

Técnicas de manipulación de DOM

El DOM se puede utilizar en una amplia variedad de formas. Para ilustrar su flexibilidad, veamos seis técnicas que pueden ayudarlo a comenzar con esta útil API.

1. El método Before()

Fiel a su nombre, el método before() se utiliza cuando desea insertar cualquier elemento antes de otro elemento de destino, como se indica en el código.

En este ejemplo, el método se puede usar para agregar un elemento cuadrado con texto sobre un elemento designado, como un botón, una vez que se hace clic en él:

 $(esto).before( "<div class='cuadrado'>Otro cuadrado</div>" );

La ubicación y el diseño de la página son consideraciones a tener en cuenta al usar este método. Querrá asegurarse de que su nuevo elemento no rompa su diseño ni cause problemas visuales.

2. El método After()

De la misma manera que el método before() te permite insertar elementos antes de otro elemento indicado, el método after() permite lo contrario. Por ejemplo, podría usarse para agregar un elemento justo debajo de un botón, una vez que se selecciona el botón:

 $(esto).después( "<div class='cuadrado'>Otro cuadrado</div>" );

Agregar contenido interactivo manipulando el DOM con jQuery de esta manera es una forma sólida de ganar interactividad, sin perder velocidad en el proceso.

3. El Método Agregar()

En lugar de hacer que aparezcan nuevos elementos individuales, es posible que desee agregar su nuevo elemento a uno existente. Por ejemplo, tal vez desee agregar el texto "¡Feliz cumpleaños!" dentro de un área coloreada cada vez que se hace clic en un botón específico.

Para agregar su nuevo elemento al contenido existente del elemento de destino, debe insertar el comando jQuery append() dentro del código fuente HTML:

 $( ".box" ).append( "<p>¡Feliz cumpleaños!</p>" );

Este método agrega la manipulación al final del elemento que indique en la cadena, en lugar de ponerlo antes o después. Dentro del contexto del documento HTML completo, puede ver cómo se lleva a cabo la manipulación:

 <!doctipo html>
 <título>Ejemplo</título>
 <estilo>
 .caja {
 fondo: naranja;
 color blanco;
 color blanco;
 ancho: 150px;
 relleno: 20px;
 margen: 10px;
 }
 </estilo>
 <secuencia de comandos src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></secuencia de comandos>
 <script>
 $( función() {
 $( "botón"). clic (función() {
 $(this).after( "<div class='box'>¡Feliz cumpleaños!</div>");
 });
 });
 </script>
 <button>Crear una caja</button>

Esta técnica le brinda una opción simple para crear interactividad dentro de un espacio confinado. Solo recuerda, con este método en particular, las manipulaciones aparecerán como una extensión del elemento que indiques, en lugar de como nuevos elementos individuales.

4. El método Anteponer()

Como saldo del método append() , prepend() agregará un elemento al final de cualquier elemento de destino que indique en el comando jQuery:

 $( ".banner" ).prepend( "<p>¡Feliz cumpleaños!</p>" );

En este ejemplo, el texto "¡Feliz cumpleaños!" aparecería al principio del banner indicado en la cadena de código.

Vale la pena señalar que estos métodos (incluidos before() , after() y append() ) son enfoques aceptables para usos simples. Sin embargo, recomendamos otras técnicas para inserciones más complejas.

5. El método Clonar()

A continuación, el método clone() es una opción bastante poderosa en términos de manipulación del DOM con jQuery. Si bien las cuatro técnicas anteriores le permiten insertar elementos y moverlos, clonar() permite copiar un elemento, eliminarlo de su lugar original y volver a insertarlo o agregarlo en otro lugar.

Por ejemplo, esta línea significa que el elemento del cuadro original permanecerá donde está, mientras que se agregará un clon al elemento del triángulo:

 $( ".box" ).clone().appendTo( ".triangle" );

La desventaja de este método es que puede causar la duplicación del atributo id del elemento. Estos atributos están destinados a ser únicos. Puede evitar este problema utilizando los atributos de clase como identificadores y empleando el método de clonación con moderación.

6. El método Wrap()

Finalmente, el método wrap() es útil si desea envolver un elemento alrededor de una cadena existente. Por ejemplo, puede envolver varios párrafos en una nueva estructura HTML identificando la clase e indicando qué estructura se está implementando:

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

Con esta técnica, está creando un <div> alrededor de cualquier elemento que coincida con la clase de destino en la cadena wrap() . Si bien puede crear una envoltura que tenga varios niveles de profundidad, debe asegurarse de que solo haya un elemento más interno.

Solución de problemas del DOM

Cuando se trata de trabajar con el DOM, queremos resaltar un aspecto clave al que querrá prestar atención. Para que sus páginas se carguen rápido y evitar códigos innecesarios (especialmente si está desarrollando un tema), debe tener cuidado de no usar ningún elemento que no sea parte del árbol DOM.

Si no está seguro de si un elemento es parte del DOM o no, puede verificar cada uno a través de su navegador en la parte frontal de su sitio. Puede inspeccionar elementos en la página y determinar dónde están incluidos en el árbol DOM.

Esto es especialmente útil cuando otro script ha cambiado el HTML original de su sitio. De lo contrario, su HTML y DOM a veces pueden aparecer exactamente iguales.

Explore otros recursos y herramientas de WP Engine

Si piensa en el DOM como una parte orgánica de su sitio, un recurso vivo que responde al código fuente HTML, el poder de su accesibilidad es bastante asombroso. Es por eso que comprender el DOM y cómo se puede utilizar para mejorar sus proyectos puede ayudarlo a llevar su sitio al siguiente nivel.

La manipulación del DOM con jQuery resalta la belleza de la plataforma de código abierto de WordPress. Aquí en WP Engine, entendemos cómo los recursos para desarrolladores de alta calidad pueden marcar la diferencia. ¡Es por eso que ofrecemos mucha ayuda para los usuarios de WordPres, junto con planes de alojamiento de primer nivel!