Hola:
Pues aquí va mi segunda pregunta en este foro.
Sé que lo que voy a preguntar no tiene mucha relevancia, ya que trata sobre el recorrido de elementos del DOM de forma relativa (recorriendo el árbol de padres a hijos y eso), y ya he leído que en la práctica no se usa este sistema por engorroso, y porque en caso de actualizaciones de la página web, las referencias ya no serían en la mayoría válidas.
Dicho ésto, planteo mi duda. Pongo como ejemplo [URL="http://dev.opera.com/articles/view/traversing-the-dom-es/"]el sacado aquí:[/URL]
Se plantea este documento de ejemplo:
Código:
<html>
<head>
<title>Esto es un Documento</title>
</head>
<body>
<h1>Esto es una cabecera</h1>
<p id="TextoExcitante">
Esto es un párrafo! <em>Excitante</em>!
</p>
<p>
Esto también es un párrafo, pero no es ni de lejos tan excitante como el último.
</p>
</body>
</html>
que yo he dejado así:
Código:
<!DOCTYPE html>
<html>
<head>
<title>Esto es un Documento</title>
<script>
window.onload= function(){
var nodoDoctype = document.childNodes[0];
var nodoHtml = document.childNodes[1];
var nodoHead = nodoHtml.childNodes[0];
var nodoBody = nodoHtml.childNodes[2]; //por qué no es el 1????
console.log("El documento raiz es: "+nodoHtml.parentNode.nodeName);
console.log("El DOCTYPE es: "+nodoDoctype.nodeName);
console.log("nodoHtml es un nodo: "+nodoHtml.nodeName);
console.log("nodoHead es un nodo: "+nodoHead.nodeName);
console.log("nodoBody es un nodo: "+nodoBody.nodeName);
console.log("nodoHead tiene: "+nodoHead.childNodes.length+" elementos"); // por qué 5 y no 3????
console.log ("Primer valor es de tipo: "+nodoHead.childNodes[0]);
console.log ("Segundo valor: "+nodoHead.childNodes[1]);
console.log ("Tercer valor: "+ nodoHead.childNodes[2]);
console.log ("Cuarto valor: "+nodoHead.childNodes[3]);
console.log ("Quinto valor: "+nodoHead.childNodes[4]);
console.log ("Contenido de TITLE: "+nodoHead.childNodes[1].firstChild.nodeValue);
/
</script>
</head>
<body>
<h1>Esto es una cabecera</h1>
<p id="TextoExcitante">Esto es un párrafo! <em>Excitante</em>!</p>
<p>Esto también es un párrafo, pero no es ni de lejos tan excitante como el último.</p>
</body>
</html>
Pues bien, en teoría, el elemento <html> habría de tener dos hijos, <head> y <body>, pudiendo accederse a ellos según los índices [0] y [1] del array childNodes. Pero no, resulta que tengo 3 hijos, y que <body> es el tercer elemento del array (el [2]). ¿Por qué? Porque hay un nodo con texto....que no sé cual es.
Igualmente, en <head> debería haber 2 hijos....pero hay 5. La razón es la misma. En lugar de haber <title> y <script>, hay
<texto>-<title>-<texto>-<script>-<texto>
Aunque como digo, no se usan estos métodos, los resultados demuestran que me estoy equivocando, o que no comprendo entonces cómo va el DOM.
La pregunta, después de tanto palabrerío es....que son esos campos de texto?