1.6. Contando el número de nodos en el DOM y su contenido
Echemos un vistazo a la siguiente página HTML:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0
Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xml: lang = "es" lang = "es">
<head>
<meta http-equiv = "Content-Type" content =
"text / html; charset = utf-8" />
<title> JQuery Ejemplos </ title>
<script src = "jquery-1 [1] .3.2.js" type =
"text / javascript"> </ script>
<script src = "d1.js" type = "text /
javascript"> </ script>
</ head>
<body>
<div id = "root">
<div> Darjeeling </ div>
<div> Assam </ div>
<div> Kerala </ div>
</ div>
</ body>
</ html>
Podemos ver que el archivo HTML anterior incluye las
etiquetas <script> para cargar la biblioteca jQuery, así como para
incluir el archivo JavaScript que contiene el código de jQuery (d1.js). También
vemos que el archivo HTML contiene un elemento div con el id = "root". Todos los elementos
dentro de este elemento div son sus elementos secundarios; es decir, el div con
id = "root" es el padre de todos los elementos div descritos en su
interior. Para contar los nodos DOM y mostrar su texto, escribimos el siguiente
código jQuery:
$(document).ready(function() {
var $nodes = $('#root').children(); alert('Number of nodes is '+$nodes.length); var txt="";
$('#root').children().each( function() {
txt+=$(this).text();
});
alert(txt);
});
Se accede y se asignan a un $nodes Todos los elementos secundarios del div con id = "root". Le mostramos
la longitud de la colección de nodos secundarios utilizando y lo podemos ver en
un alerta. A partir de entonces, con la ayuda del método each (), tenemos
acceso a todos los elementos almacenados en los $nodes de uno en uno. Utilizamos el método de text()
y el acceso y concatenar el texto de los elementos de una cadena variable $
txt. Al final, el texto de todos los nodos hijos se visualiza a través de otro método alert ().
Echemos un vistazo a los métodos utilizados en el código jQuery anterior, uno
por uno.
children ()
El método children () es un método de árbol de recorrido que
se usa para buscar los hijos inmediatos
del elemento especificado y devuelve un nuevo objeto jQuery. Este método sólo
viaja un solo nivel en el árbol DOM. En nuestro ejemplo, este método tiene
acceso a todos los nodos DOM definidos en el elemento div de la raíz y los
asigna a los $nodes de las variables. $ nodos es un objeto jQuery que contiene
los tres elementos div definidos en el elemento div raíz. Usando atributo de
longitud del objeto $ nodos, primero mostramos el recuento del número de nodos
DOM en el archivo HTML.
each ()
Cada uno () es un método que se utiliza para iterar sobre
cada elemento de la colección envuelto. Contiene una función de iterador en el
que se escribe el código que se aplica a cada elemento individual de la
colección.
text ()
text () es un método del objeto jQuery que accede a los
contenidos de texto del elemento (s) seleccionado. El contenido de texto del
elemento (s) seleccionado se combinan y se devuelven en forma de una cadena.
Para ver el contenido de texto de un elemento de párrafo, podemos escribir
siguiente código jQuery:
alert($('p').text());
Vamos a suponer que el elemento de párrafo aparece como se
muestra en el siguiente ejemplo:
<p> Los estilos hacen el trabajo de formato mucho más
fácil y eficiente. Para dar un aspecto atractivo a los sitios web, se utilizan
mucho los estilos.
<span> jQuery es una poderosa biblioteca de JavaScript
que nos permite añadir elementos dinámicos a nuestros sitios web. </
span> No sólo es fácil de aprender, pero es fácil de poner en práctica también.
<br>
<a href="a1.htm"> jQuery selectores
</a> se utiliza para seleccionar el área del documento donde queremos
aplicar estilos </ p>
Podemos ver el contenido de texto de los hijos de un
elemento de párrafo mediante la siguiente declaración:
$(document).ready(function() {
alert($('p').children().text());
});
parent ()
El método parent () es un método de recorrido de árbol que
busca el precursor inmediato de cada uno de los elementos seleccionados y
devuelve un nuevo objeto jQuery. Este método sólo viaja a un solo nivel en el
árbol DOM. Para obtener el contenido del texto del padre del elemento span,
podemos usar el siguiente código de jQuery:
alert($('span').parent().text());
1.6. Contando el número de nodos en el DOM y su contenido
Reviewed by Unknown
on
8:42
Rating:
Reviewed by Unknown
on
8:42
Rating:
No hay comentarios: