.contents()

El método .contents() de jQuery se utiliza para obtener todos los nodos hijos de cada elemento en el conjunto coincidente, incluidos los nodos de texto y los comentarios. Este método es especialmente útil cuando se necesita manipular o acceder al contenido de elementos que no solo contienen otros elementos HTML, sino también nodos de texto.

Definición:

El método .contents() devuelve todos los nodos hijos de los elementos seleccionados, incluyendo elementos, nodos de texto y comentarios.

Sintaxis:

index.js

index.js

JavaScript

$(selector).contents()

selector: Un selector de jQuery que selecciona los elementos cuyos contenidos se desean obtener.

Ejemplo:

index.html

index.html

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de .contents() en jQuery</title>
    <style>
        .resaltado {
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#botonResaltar").click(function(){
                var contenidos = $("#contenedor").contents();
                contenidos.each(function(){
                    if (this.nodeType === 3) { // Nodo de texto
                        var textoResaltado = "<span class='resaltado'>" + this.nodeValue + "</span>";
                        $(this).replaceWith(textoResaltado);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="botonResaltar">Resaltar Nodos de Texto</button>
    <div id="contenedor">
        Texto fuera de cualquier etiqueta.
        <p>Este es un <span>párrafo</span> con <strong>texto</strong> y <em>más texto</em>.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de .contents() en jQuery</title>
    <style>
        .resaltado {
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#botonResaltar").click(function(){
                var contenidos = $("#contenedor").contents();
                contenidos.each(function(){
                    if (this.nodeType === 3) { // Nodo de texto
                        var textoResaltado = "<span class='resaltado'>" + this.nodeValue + "</span>";
                        $(this).replaceWith(textoResaltado);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="botonResaltar">Resaltar Nodos de Texto</button>
    <div id="contenedor">
        Texto fuera de cualquier etiqueta.
        <p>Este es un <span>párrafo</span> con <strong>texto</strong> y <em>más texto</em>.</p>
    </div>
</body>
</html>

index.js

index.js

JavaScript

$("#botonResaltar").click(function(){
    var contenidos = $("#contenedor").contents();
    contenidos.each(function(){
        if (this.nodeType === 3) { // Nodo de texto
            var textoResaltado = "<span class='resaltado'>" + this.nodeValue + "</span>";
            $(this).replaceWith(textoResaltado);
        }
    });
});

Explicación del Ejemplo:

En este ejemplo, al hacer clic en el botón con el id “botonResaltar”, se obtiene el contenido del div con el id “contenedor” utilizando el método .contents(). Luego, se itera sobre cada nodo hijo. Si el nodo es un nodo de texto (nodeType === 3), se envuelve el texto en un <span> con la clase “resaltado”, que tiene un fondo amarillo, y se reemplaza el nodo de texto original con el nuevo elemento <span>.

Esto permite resaltar todo el texto contenido en el div, incluyendo texto fuera de cualquier etiqueta HTML.