Using DOM To Print HTML Tags

[mtcmedia]

How do I use DOM with Javascript?

I just wanna do something simple, like have a Javascript to read an HTML document and print all of the tags and what they contain.

So I will have to traverse the DOM tree. But I aint sure how to find out what each node contains, and find out what kind of tag it is.

Is this really complicated?

HELP!

[khalidali63]

Originally posted by mtcmedia
........
Is this really complicated?
HELP!

To some extent yes,but once you get hang of XML style documents,its not that diffuclt at all.

try this link

http://www.mozilla.org/docs/dom/samples/treewalkerdemo.xml

Cheers

Khalid

[mtcmedia]

Thanks for the replies guys....

However, I am looking to traverse the DOM tree in some way or other..... using only JavaScript.... not XML....

[mtcmedia]

Sorry I should have been more clear! Yeah you are right! This is all I have come up with so far.... I know its not right....

function showNodes(n) { // n is a document
// var bytag = n.getElementsByTagName(*) ; // returns node list of all tags?
if(n.nodeType == 1 /*Node.ELEMENT_NODE*/){
for(var i = n.firstChild;i != null; i = i.nextSibling){
var node_type = i.
}
}
}

[mtcmedia]

Right....

I understand that - so how is the best way to tackle this? How can I access the tags from the nodes?

I want to print the tags in tree order, so it will be html, head, body etc etc. I also want to print any content the tags hold, say a title tag for example, <title>i would want to print this</title> too.

I think I know how to access the content of the tag, I think its just something like ".data". But how do I traverse the tree and access the tags themself?

Thanks for your help Dave! Been looking at your site, very impressive!

[mtcmedia]

I really could use with a little pointing in the right direction on how to do this...

Or even if you could write the code, or if not, part of it, or even just explain how to access the tag types. Depending on how much time you have!

Or if anyone else knows, please help!

[mtcmedia]

anyone?

[khaki]

Hi mtcmedia...

I received your PM, but it's always best to keep the threads complete for others who may also be following it for the solution.

It's sweet that you think that I "seem to know everything" (i'll pause to let everyone catch their breath and compose themselves. lol)...

...but my knowledge of the DOM is new, and you may be best helped by the 2 threads below:

http://forums.webdeveloper.com/showthread.php?s=&threadid=5354

http://forums.webdeveloper.com/showthread.php?s=&threadid=5810

I myself am still absorbing the entire thing (Vladdy has mentored me wonderfully in this though), so you will probably benefit greatly by reading what has already been offered.

Hopefully this helps you. If so... share with us all what you were able to apply to your original issue (or what questions remain to be answered).
When one learns... we all learn.

Good luck and thanks for your kind words in your PM to me (wink).

before last month, the only 'Dom" I knew was the kid who lived across the street... Dominick Parisi (lol)...
k

[mtcmedia]

hehehe thanks again guys :)

lol, you have been so helpful up to now, I just thought I had to ask you! Anyway, here is the stage I am at now:

function showNodes(n){
var root = n.nodeName;
var print_element = "element: ";
var print_text = "text: ";
var new_line = "<br>";
var tagdata;
document.write(print_element + root);
//alert(root);
// var bytag = n.getElementsByTagName(*); // returns node list of all tags?
//if(n.nodeType == 1 /*Node.ELEMENT_NODE*/){
for(var i = n.firstChild; i != null; i = i.nextSibling){
document.write("test");
if (i.nodeType == 3 /*Node.TEXT_NODE*/){
tagdata = i.data;
document.write(print_element + i.nodeName);// write the tag
document.write(new_line + print_text + tagdata);
// write the content (data)
} else {
document.write(print_element + i.nodeName);// write the tag
document.write(new_line);
}
}
}

I have been using W3 to get to this stage, and I think I am almost there... Check it out: http://www.w3.org/TR/DOM-Level-2-Core/java-binding.html

As you can see, it prints our the root tag, HTML. Woo hoo! but it wont enter the loop, as it doesnt print the "test". I think that this should be pretty close to working. Can you see the problem?

[mtcmedia]

where did u all go?

[mtcmedia]

surely someone can help? :(

[mtcmedia]

getting desperate!

[khalidali63]

Did you mean something like this.

http://68.145.35.86/skills/javascripts/DOMTraversing.html

Cheers

Khalid

[mtcmedia]

Cannot find server? :( Are you sure the link works

[mtcmedia]

That link is definatly dead. How frustrating! Can anyone else help???? PLEASE!!

[khalidali63]

no its not try it again

[mtcmedia]

OK it works :D

So why wont my code work?

function showNodes(n){
var node = n;
var print_element = "element: ";
var print_text = "text: ";
var new_line = "<br>";

for(var i = node.firstChild; i != null; i = i.nextSibling){
if (i.nodeType == 1 /*Node.DOCUMENT_NODE*/){
var tag = node.nodeName;
document.write(print_element + tag);
if(!node.hasChildNodes()){
document.write("eof");
}
showNodes(node);
} else if (i.nodeType == 3 /*Node.TEXT_NODE*/){
var tagdata = i.data;
document.write(print_text + tagdata);
}
}

[mtcmedia]

This is how I called it:

<INPUT onclick="showNodes(document.documentElement)" type=button value="Show
HTML node names">

[khalidali63]

there are at least couple of things wrong in your code.

1. the reiteration in loop is not happening properly because of the assignment error
change i with node or node with i
node = n should be
either
i = n and then in the loop
for(i = i.firstChild.....

second is document.write. ( it looks to me )
replace it with a variable to hold the results

such as

var result = ""
function Process(val){
document.write(val)
}
and then in the function call

onclick="showNodes(document);Process(result)"

Hope this helps
Khalid

[mtcmedia]

I have changed the method too:

function showNodes(n){
var node = n;
var print_element = "element: ";
var print_text = "text: ";
var new_line = "<br>";

for(var node = node.firstChild; node != null; node = node.nextSibling){
if (node.nodeType == 1 /*Node.DOCUMENT_NODE*/){
var tag = node.nodeName;
document.write(print_element + tag);
if(!node.hasChildNodes()){
document.write("eof");
}
showNodes(node);
} else if (node.nodeType == 3 /*Node.TEXT_NODE*/){
var tagdata = node.data;
document.write(print_text + tagdata);
}
}

And it doesnt work, what do you mean by:

var result = ""
function Process(val){
document.write(val)
}
and then in the function call

onclick="showNodes(document);Process(result)"


Can you please complete this for me so it works? Id be very grateful.

[khalidali63]

Well here you go...



<script type="text/javascript">
var result = ""
function Process(val){
document.write(val)
}
function showNodes(n){
var node = n;
var print_element = "element: ";
var print_text = "text: ";
var new_line = "<br>";

for(var node = node.firstChild; node != null; node = node.nextSibling){
if (node.nodeType == 1 /*Node.DOCUMENT_NODE*/){
var tag = node.nodeName;
result +=print_element + tag
if(!node.hasChildNodes()){
result +="<br/>EOF"
}
showNodes(node);
} else if (node.nodeType == 3 /*Node.TEXT_NODE*/){
var tagdata = node.data;
result +=print_text + tagdata
}
}
}
</script>
</head>

<body >
<INPUT onclick="showNodes(document);Process(result)" type=button value="Show HTML node names">



Cheers

Khalid

[mtcmedia]

Khalid,


Thanks for your continued help! I have added this code, but when I click the button... nothing happens. It just holds on....

Is it working for you?

[mtcmedia]

Does this work for anyone else? Or can anyone else help in finding the problem?

[khalidali63]

What are you alking about?

It works,you must be doing some thing very...well lets just say "not good" that screws up the code.

Here si the link and its exact code that I posted earlier.

http://68.145.35.86/temp/mtcmedia-Problem.html

Cheers

Khalid

[mtcmedia]

Ok, please disregard my previous posts! I have made a lot of progress! All I need now, is to indent the output correctly, and start from <HTML> tag rather than the <HEAD> tag.

I would like the output to be formatted like:

element: {HTML}
element: {HEAD}
element: {TITLE}
element: {META}content="text/html"
element: {BODY}
element: {P}

etc etc can this be done? I thought it would use &nbsp; or something, but im not sure how to implement this. If someone can resvolve this then that will be the question finished and I can award the points!

// JavaScript Document

var result = "";
//=========================================================
//Print Output Function
function Process(val){
document.open();
document.write(val);
document.close();
}
//End Print Output Function
//=========================================================

//=========================================================
//Traverse Nodes Function
function showNodes(n){
var node = n;
var element_red = "<font face='verdana' color='red'>";
var text_blue = "<font face='verdana' color='blue'>";
var end_colour = "</font>"
var print_element = element_red + "element: ";
var print_text = text_blue + "text: ";
var new_line = "<br>";
var tabspace_element = "&nbsp;&nbsp;";
var tabspace_text = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";


for(node = node.firstChild; node != null; node = node.nextSibling){
if (node.nodeType == 1 /*Node.DOCUMENT_NODE*/){
var tag = node.nodeName;
tag = "{" + tag + "}" + end_colour + new_line;
result +=tabspace_element + print_element + tag;
if(!node.hasChildNodes()){

}
showNodes(node);
} else if (node.nodeType == 3 /*Node.TEXT_NODE*/){
var tagdata = node.data;
tagdata = tagdata + new_line;
result += tabspace_text + print_text + tagdata;
}
}
}
//End Traverse Nodes Function
//=========================================================

[khalidali63]

Yes this can be done,and you will have to add another method to get attributes for a node as well.
var atts node.atributes;

and then walk through each attribute and print it.

Cheers

Khalid

[mtcmedia]

OK... Im not quite sure what you mean, can you explain?

But first change, how do I get it to start at <HTML> rather than <HEAD>

[khalidali63]

It does start from HTML tag,are you even trying the link Iam posting here..

Khalid

[mtcmedia]

Of course Im using it! I just posted my source code 2 minutes ago, I have coloured the output the way I want it - but it prints <HEAD> as the first element.

The loop starting condition is var node = node.firstChild. Is node at this point <HTML>? So we are looking at its first child which is <HEAD>, thats why it wont print <HTML>?

[mtcmedia]

sorry! my mistake! it is printing HTML. I had edited the onClick and forgot I had done so!

Sorry again!

So how can I do the indentation. I tried to type how I wanted it but it didnt display properly.

I want it like

HTML
--------- HEAD
------------------- TITLE
------------------- META
--------- BODY
------------------- SCRIPT
------------------- P
------------------- P
------------------- FORM
-----------------------------INPUT

You see what I mean?

[mtcmedia]

So I think I have to use the level that the tag appears in the DOM Tree to define how far indented it is. Can anyone help me with this, as I am not sure how to do it.