View Full Version : The Document Object Model

09-19-2011, 05:35 PM
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

09-19-2011, 05:44 PM
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?

var newLI = document.createElement('li');
var newText = document.createTextNode('New list item');

// now append the new LI to the very first <ul> list

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

// currElement is the current <li> item
var theParent = currElement.parentNode;
var theSecond = theParent.getElementsByTagName('li')[1];

09-19-2011, 05:49 PM
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

09-20-2011, 10:37 PM
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??

<ul id="menu">
<li class="menu">Home</li>
<li class="menu">Network
<li>Network Installation</li>
<li class="menu">Computer
<li>PC Repair</li>
<li>PC Health</li>
<li>PC Set-Up & Connection</li>
<li>Memory Installation</li>

09-20-2011, 10:40 PM
how do i delete this post lol

09-20-2011, 11:59 PM
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


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

09-21-2011, 01:14 PM
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?

var theComputerLI = document.getElementById('menu').getElementsByTagName('li')[2];
theComputerLI.onclick = thefunction;

function thefunction() {
alert("success! :D");

09-21-2011, 01:23 PM
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.