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:
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.
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:
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.
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:
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.
