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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    UK, South Wales, Newport
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts

    The Document Object Model

    I read tutorials and pdfs on the DOM and its pissing me off coz ther not showing me or answering my questions.
    Can someone please explain to me how to use the DOM. Like:

    1) Can i create child nodes or parents? And if so when and how?

    2) How do i look at a parent node (lets say of a list) and select a specific child (part of the list)?

    Thank You

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Quote Originally Posted by samz View Post
    1) Can i create child nodes or parents? And if so when and how?
    Generally you can only create child nodes. But if you create a child node to a previously generated child node, the first one becomes a parent automatically

    How to add?
    Code:
    var newLI = document.createElement('li');
    var newText = document.createTextNode('New list item');
    newLI.appendChild(newText);
    
    // now append the new LI to the very first <ul> list
    document.getElementsByTagName('ul')[0].appendChild(newLI);
    Quote Originally Posted by samz View Post
    2) How do i look at a parent node (lets say of a list) and select a specific child (part of the list)?
    Look at? Let's say you have a list <ul> with <li> items and you want to select the second one
    Code:
    // currElement is the current <li> item
    var theParent = currElement.parentNode;
    var theSecond = theParent.getElementsByTagName('li')[1];

  • Users who have thanked devnull69 for this post:

    samz (09-20-2011)

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    use google to search for code samples. the best results come when you start with "javascript"+help topic
    for instance i googled "create child nodes or parents" directly from your post and the first result was a code sample of how to add a node by appendChild() on w3schools.com which also has a great sandbox for you to fiddle with their code and learn from trial/error.

    You can use totalLength = myElement.parentNode.length to get the length of the parentNode of the DOM array for the parent of "myElement" element, then loop through its childs with for(var i = 0; i < totalLength.length; i++){/*processing code*/} or even better for (i in myElement.parentNode){/*processing code*/} should also work. But all of the DOM navagation tools plus a handy sandbox tool can be found at w3xchools.com

  • #4
    New Coder
    Join Date
    Sep 2011
    Location
    UK, South Wales, Newport
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    ok how about this example then? Heres an unordered list with 3 main list items, where 2 of them have sub-lists. How would i access the "Computer" list items using child nodes? Do i have to create and assign nodes??

    Code:
    <ul id="menu">
        <li class="menu">Home</li>
        <li class="menu">Network
        	<ul>
        	<li>Network Installation</li>
            </ul>
        </li>
        <li class="menu">Computer
        	<ul>
        	<li>PC Repair</li>
            <li>PC Health</li>
            <li>PC Set-Up & Connection</li>
            <li>Memory Installation</li>
            </ul>
        </li>
    </ul>
    Last edited by samz; 09-20-2011 at 11:00 PM.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    UK, South Wales, Newport
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    how do i delete this post lol

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You'll only have to create nodes if you want to "physically" add elements to the DOM. If you only want to access existing elements, you'll have to refer to them

    Example
    Code:
    var theComputerLI = document.getElementById('menu').getElementsByTagName('li')[2];
    // or
    var theComputerLI = document.getElementsByClassName('menu')[2];
    There are always several different ways to refer to existing DOM elements ... just choose a convenient one

  • Users who have thanked devnull69 for this post:

    samz (09-21-2011)

  • #7
    New Coder
    Join Date
    Sep 2011
    Location
    UK, South Wales, Newport
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Ive tried this code and it actually refers to the Network list. My code below works when i click on the list item under the Network list.
    Im using safari. I take it as Safari starts indexing at 1 instead of 0? If im right do you know how the other browsers index too?

    Code:
    var theComputerLI = document.getElementById('menu').getElementsByTagName('li')[2];
    theComputerLI.onclick = thefunction;
    
    function thefunction() {
    	alert("success! :D");
    }

  • #8
    New Coder
    Join Date
    Sep 2011
    Location
    UK, South Wales, Newport
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    OH I SEE HOW IT WORKS!
    it starts from 0 upto however many li i have. I fort i wud start a new count after each list heading like HOME, NETWORK, COMPUTERS.

    I GET IT NOW


  •  

    Posting Permissions

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