Cargando

Ir a contenido



Ver Más! Si te gusta estar al día y conocer todos los trucos y novedades de las redes sociales (Instagram, WhatsApp etc.) y el mundo de internet, haz clic AQUÍ >


 


HTML5 – Navegación Arbol DOM

En este tutorial veremos cómo navegar por el árbol DOM utilizando los métodos que nos da el objeto document de nuestras páginas HTML.


Escrito por el nov 20 2013 20:29 navegar por el árbol DOM páginas HTML


Dentro de un documento HTML podemos navegar entre los diferentes elementos que pertenecen al árbol DOM, para ello contamos con la estructura jerárquica y podemos utilizar múltiples métodos con los cuales nos podemos aproximar a las relaciones de los documentos.

Navegar por el árbol DOM

Como mencionamos, la navegación la podemos hacer a través de la estructura jerárquica visualizando el esquema como un árbol, de esta manera podemos tratar a los elementos como padres, hijos, hermanos.

Con esto la búsqueda de un elemento se puede hacer siguiendo la filosofía una búsqueda por relación.

Veamos los métodos disponibles antes de pasar a las aplicaciones prácticas:

· childNodes: Retorna todos los elementos hijos del elemento padre.

· firstChild: Retorna el elemento que es el primer hijo de un elemento padre.

· hasChildNodes(): Retorna true o verdadero si el elemento actual tiene nodos hijos.

· lastChild: Retorna el último hijo de un elemento en el documento.

· nextSibling: Retorna el elemento hermano definido por el elemento HTML actual.

· parentNode: Retorna el elemento padre del elemento HTML actual.

· previousSibling: Retorna el elemento hermano anterior al elemento HTML actual.


Una vez que ya sabemos que métodos tenemos disponibles vamos a ver un sencillo ejemplo en código con el cuál vamos a entender de qué va la navegación por el árbol DOM.

<!DOCTYPE HTML>
<html>
		 <head>
					 <title>Example</title>
					 <style>
								 pre {border: medium double black;}
					 </style>
		 </head>
		 <body>
					 <pre id="results"></pre>
					 <p id="tblock">
								 There are lots of different kinds of fruit - there are over 500 varieties
								 of <span id="banana">banana</span> alone. By the time we add the countless
								 types of <span id="apple">apples</span>,
								 <span="orange">oranges</span="orange">, and other well-known fruit, we are
								 faced with thousands of choices.
					 </p>
					 <img id="apple" class="fruits images" name="apple" src="apple.png" alt="apple"/>
					 <img id="banana" src="banana-small.png" alt="small banana"/>
					 <p>
								 One of the most interesting aspects of fruit is the variety available in
								 each country. I live near London, in an area which is known for
								 its apples.
					 </p>

					 <p>
								 <button id="parent">Parent</button>
								 <button id="child">First Child</button>
								 <button id="prev">Prev Sibling</button>
								 <button id="next">Next Sibling</button>
					 </p>
					 <script>
								 var resultsElem = document.getElementById("results");
								 var element = document.body;
								 var buttons = document.getElementsByTagName("button");
								 for (var i = 0; i < buttons.length; i++) {
											 buttons[i].onclick = handleButtonclick;
								 }
								 processNewElement(element);
								 function handleButtonclick(e) {
											 [b]if (element.style) {[/b]
[b]														 element.style.backgroundColor = "white";[/b]
[b]											 }[/b]
[b]											 f (e.target.id == "parent" && element != document.body) {[/b]
[b]																	 element = element.parentNode;[/b]
[b]														 } else if (e.target.id == "child" && element.hasChildNodes()) {[/b]
[b]																	 element = element.firstChild;[/b]
[b]														 } else if (e.target.id == "prev" && element.previousSibling) {[/b]
[b]																	 element = element.previousSibling;[/b]
[b]														 } else if (e.target.id == "next" && element.nextSibling) {[/b]
[b]																	 element = element.nextSibling;[/b]
[b]																	 }[/b]
								 processNewElement(element);
											 if (element.style) {
																	 element.style.backgroundColor = "lightgrey";
																										 }
																	 }
								 function processNewElement(elem) {
											 resultsElem.innerHTML = "Element type: " + elem + "\n";
											 resultsElem.innerHTML += "Element id: " + elem.id + "\n";
											 resultsElem.innerHTML += "Has child nodes: "
											 + elem.hasChildNodes() + "\n";
														 if (elem.previousSibling) {
																	 resultsElem.innerHTML += ("Prev sibling is: "
														 + elem.previousSibling + "\n");
								 } else {
											 resultsElem.innerHTML += "No prev sibling\n";
}
								 if (elem.nextSibling) {
								 resultsElem.innerHTML += "Next sibling is: "
								 + elem.nextSibling + "\n";
					 } else {
											 resultsElem.innerHTML += "No next sibling\n";
					 }
		 }
		 </script>
		 </body>
</html>

Este código lo que logra es poder navegar entre elementos y de una vez los sombrea en gris claro para poder diferenciar en que parte del documento estamos, veamos en la imagen como deberíamos verlo en nuestro navegador:



html5_arboldom.jpg


Como vemos esta forma de ubicar los elementos dentro del DOM nos sirve cuando no estamos seguros de los identificadores o cuando es una estructura dinámica pero definida.

Con esto finalizamos este tutorial, donde pudimos hacer búsquedas de elementos en un documento HTML sin depender de los identificadores ni los nombres de elementos, simplemente utilizando su relación en la estructura jerárquica.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado nov 20 2013 20:29
  •   Actualizado nov 20 2013 20:45
  •   Visitas 2.1K
  •   Nivel
    Profesional