...

View Full Version : The Document Object Model



samz
09-19-2011, 04: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

devnull69
09-19-2011, 04: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');
newLI.appendChild(newText);

// now append the new LI to the very first <ul> list
document.getElementsByTagName('ul')[0].appendChild(newLI);



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

blaze4218
09-19-2011, 04: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

samz
09-20-2011, 09: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
<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>

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

devnull69
09-20-2011, 10: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

Example


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

samz
09-21-2011, 12: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");
}

samz
09-21-2011, 12:23 PM
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 :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum