Los Nodes de texto son un tipo de Node que denota el texto real dentro de un elemento. Los textNodes de cualquier elemento se pueden seleccionar usando jQuery seleccionando todos los Nodes y usando el método filter() para verificar la propiedad nodeType.
El elemento requerido se selecciona primero usando el selector jQuery. El método contents() se usa en elementos seleccionados. Este método se utiliza para devolver los elementos secundarios directos de un elemento, incluidos todos los Nodes de texto y comentarios.
El método filter() se usa en estos elementos devueltos para filtrar solo los Nodes de texto requeridos. La función de filtro personalizado comprueba si la propiedad nodeType de los Nodes devuelve igual al valor Node.TEXT_NODE .
El valor «Node.TEXT_NODE» se utiliza para identificar un Node de texto de otros Nodes. Alternativamente, el valor entero «3» también podría usarse para identificar un Node de texto. El método filter() ahora solo devolverá los Nodes que son textNodes. Por lo tanto, este método se puede utilizar para seleccionar los Nodes de texto de cualquier elemento.
Sintaxis:
selectedElement = $("elementRequired").contents();
textNodes = selectedElement.filter(function () {
return this.nodeType === Node.TEXT_NODE;
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to select text nodes using jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to select text nodes using jQuery?
</b>
<p class="example">
This is line 1<br>
This is line 2<br>
This is line 3
</p>
<button onclick="getTextNodes()">
Click to get Text Nodes
</button>
<script type="text/javascript">
function getTextNodes() {
selectedElement = $(".example").contents();
textNodes = selectedElement.filter(function ()
{
return this.nodeType === Node.TEXT_NODE;
});
console.log(textNodes);
}
</script>
</body>
</html>
Producción:
- Monitor:
- Consola:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA