Geek Answers Handbook

Passing through the DOM all children and values

A container is a div to which I added basic HTML.

The debug_log function prints the following:

I'm in between!
I'm in the div!
I'm on the Internet p

What happened to the rest of the text in the p tag ("aragraph tag !!"). I think I don’t understand how to walk through the document tree. I need a function that will analyze the entire document tree and return all the elements and their values. The code below is a kind of first crack with a simple display of all displayed values.

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]); } }
+7
source share
3 answers

Generally, when moving the DOM, you want to specify a starting point. From there, check to see if the starting point has childNodes . If so, skip them and restart the function if they also have childNodes .

Here is the code that is output to the console using the DOM form of these nodes (I used the document / HTML element as the starting point). You will need to run if if against window.console , if you allow non-developers to load this page / code and use 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); } } }

Example: http://jsfiddle.net/ee5X6/

+8
source

IN

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

you request the first child, which is the text node containing "I \ m in a". Text "aragraph tag !!" is the third child that is not registered.

Curiously, the last line containing "p" should never occur, because the span is not a direct child of the container.

0
source

I'm not sure if this is what you need, or if it is possible in your environment, but jQuery can easily do something like this. Here is an example of fast jQuery that might work.

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

Which gives the following console output:

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

More articles:


All Articles