Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Draw DOM node tree

    I apologize if this is a simple question, but I can't seem to get a simple answer for it.

    Is there a tool that will automatically draw a DOM node tree from an HTML document? A friend has an assignment due in an hour and they asked me if I had any idea so I figured I would try here.

    I need something like this: http://www.w3schools.com/dom/nodetree.gif from the file their teacher gave.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Posting Rules #1.5:
    No homework assignments - Do not post your entire homework assignment and request that other members do it for you. This is considered cheating, and your thread may even be used by your school to prove your guilt. Now, you may ask for advice or help on a specific aspect of your assignment that you're having trouble with. Use common sense as far as what's acceptable in terms of soliciting help with homework assignments.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    At this point in time the assignment is done and gone, but it still has me curious and I still am not any closer on how folks come up with a tree of that nature. The reason I asked here is because from everything on the documentation the teacher considered it a small issue, worthy of little more than a couple of points out of the final grade, but it seemed a huge undertaking for that. Thus the question of if I was missing out on a simple tool for the job.

    Do not post your entire homework assignment and request that other members do it for you
    Thank you for clarification of the rules, though I would think this falls under the help with, rather than completion of category. This would be completely within the "advice or help on a specific aspect of your assignment" category. This is why I posted the end result I needed and not the file with the request that it be done for me.

    Anyone willing to give me a nod in the proper direction I would still appreciate it, although it is curiosity at this point and I am not taking the class myself, so its not a question i could have asked her teacher.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    while I would disagree with your assessment of the nature of your request (people who come here for help tend to at least post some code that they have tried and then go on to describe specific difficulties that they are having. People who expect things handed to them on a platter come with ridiculous timelines and zero effort shown), I'd say that if this was just a minor question the teacher was probably thinking of inner or outerHTML.

    It doesn't look anything like the picture posted, but can be used to get a graphical representation of the page structure at load time. If you want a representation of the page as is you would have to recurse the nodes, an operation that would be worth way more than a few points, I suspect (unless this is an advanced programming class). Anyway. outerHTML grabs the tags of the "root" div as well. innerHTML only grabs what's "inside" it...
    (works in all browsers, looks best in Chrome)
    Code:
    <body>
    
        <div id="myDiv">
            <form>
            <textarea  id="tarea" style="width: 400px; height: 100px">some text</textarea><br />
            <br />
            </form>
    		<span>hello there</span>
        </div>
    	<input type="button" value ="show me" onclick ="showIt()"/>
    	
    	<div id="disp"></div>
        <script>
    	function showIt(){
    var d = document.getElementById("disp");	
    var text = ("innerText" in d)? "innerText" : "textContent";
    d[text] = document.getElementById("myDiv").outerHTML;
     }
        </script>
    	</body>

  • Users who have thanked xelawho for this post:

    TickleMeZombie (03-12-2014)

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho, thank you kindly for your reply.

    I have to admit, that is exactly what had me stumped, and I might add completely without the ability to show work attempted because I had no earthly idea where to start. The picture is something that I saw in a lot of places while I was using google to attempt to find the answer, but never any note of how they got that beautiful representation. As far as it being an advanced programming class this is a very basic class that (I believe) just got to the point of javascript. Which, as someone that has only dabbled in php, I'm taking stabs at to try to help the friend. The actual question was worth 5 points and seemed like a hell of a lot of effort for that little bit of play.

    Should I ever figure out how it is done I will post the method here. I hope that my post didn't put me in too bad of a light, I can certainly see how it could look as poorly presented as it was.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •