Análisis a través de DOM Obtenga todos los elementos secundarios y valores

El contenedor es un div al que he agregado algo de HTML básico.Análisis a través de DOM Obtenga todos los elementos secundarios y valores

La función debug_log está imprimiendo la siguiente:

estoy en un lapso!
¡Estoy en un div!
estoy en un
p

¿Qué pasó con el resto del texto en la etiqueta p ("tag aragraph !!"). Creo que no entiendo exactamente cómo recorrer el árbol de documentos. Necesito una función que analizará todo el árbol de documentos y devolverá todos los elementos y sus valores. El siguiente código es una especie de primera grieta al obtener todos los valores mostrados.

container.innerHTML = '<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>'; 

    DEMO.parse_dom(container); 



    DEMO.parse_dom = function(ele) 
    { 
     var child_arr = ele.childNodes; 

     for(var i = 0; i < child_arr.length; i++) 
     { 
      debug_log(child_arr[i].firstChild.nodeValue); 
      DEMO.parse_dom(child_arr[i]); 
     } 
    }

Fuente

2011-06-08 Tyler Biscoe

simplemente estás buscando las versiones de DOM estos elementos/nodos o la representación HTML de ellos? –

Generalmente cuando se atraviesa el DOM, que desea especificar un punto de inicio. Desde allí, verifique si el punto de inicio tiene childNodes. Si lo hace, repásalos y repite la función si también tienen childNodes.

Aquí hay un código que se envía a la consola utilizando la forma DOM de estos nodos (utilicé el elemento documento/HTML como punto de inicio). Tendrá que ejecutar un caso contra window.console si se va a permitir que no son desarrolladores a cargar esta página/código y el uso de console:

recurseDomChildren(document.documentElement, true); 

function recurseDomChildren(start, output) 
{ 
    var nodes; 
    if(start.childNodes) 
    { 
     nodes = start.childNodes; 
     loopNodeChildren(nodes, output); 
    } 
} 

function loopNodeChildren(nodes, output) 
{ 
    var node; 
    for(var i=0;i<nodes.length;i++) 
    { 
     node = nodes[i]; 
     if(output) 
     { 
      outputNode(node); 
     } 
     if(node.childNodes) 
     { 
      recurseDomChildren(node, output); 
     } 
    } 
} 

function outputNode(node) 
{ 
    var whitespace = /^\s+$/g; 
    if(node.nodeType === 1) 
    { 
     console.log("element: " + node.tagName); 
    }else if(node.nodeType === 3) 
    { 
     //clear whitespace text nodes 
     node.data = node.data.replace(whitespace, ""); 
     if(node.data) 
     { 
      console.log("text: " + node.data); 
     } 
    } 
}

Ejemplo: http://jsfiddle.net/ee5X6/

Fuente

2011-06-08 17:39:00

<p>I\'m in a <span>p</span>aragraph tag!!</p>

que pedir al primer hijo, que es el nodo de texto que contiene "I \ 'm en una". El texto "aragraph tag !!" es el tercer hijo, que no está registrado.

Curiosamente, nunca debería aparecer la última línea que contenga "p", porque el elemento span no es un elemento secundario directo del contenedor.

Fuente

2011-06-08 16:25:37

No estoy seguro de que sea lo que necesita o si es posible en su entorno, pero jQuery puede lograr algo similar con bastante facilidad. Aquí hay un ejemplo rápido de jQuery que podría funcionar.

<html> 
<head> 
<script src="INCLUDE JQUERY HERE"> 
</script> 
</head> 
<body> 
<span> 
<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p> 
</span> 
<script> 
function traverse(elem){ 
    $(elem).children().each(function(i,e){ 
    console.log($(e).text()); 
    traverse($(e)); 
    }); 
} 

traverse($("body").children().first()); 
</script> 
</body> 
<html>

que da la siguiente salida de la consola:

I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!! 
p

Fuente

2011-06-08 17:02:33 NullRef

Lo siento, no saqué el '\\ '' s cuando copié tu ejemplo. – NullRef

Realmente no hay necesidad de jQuery aquí. –

Análisis a través de DOM Obtenga todos los elementos secundarios y valores

Respuesta

Cuestiones relacionadas