Subscribe to My adventures in coding!        RSS Feed
-----

Family Manipulation using the jQuery library [ JQ3 ]

Icon 2 Comments
Posted Image


Welcome to the next addition to my series on jquery. Here are the links to the previous enties [ JQ1] [ JQ2 ]. In this one we will be talking about the family tree of the DOM. As I am sure you know, when you create a well formed HTML document you will nest tags inside of tags. This nesting gives them a relationship we will call the family. Lets get started.

What do I need to know?
  • Javascript
  • HTML
  • CSS


What do I need?
As far as software all you need is a text editor ( notepad++ ) or IDE ( NetBeans ) and a browser ( Google Chrome ).

The family tree, what is it?
We all have a family tree and so does the DOM. The <html> tag is the parent of the <head> and the <body> tags thus making them children of the <html> tag. This works for every nested tag you have. Now what if we have this:
<html>
<head></head>
<body>
  <div id='wrapper'>
     <div id='one'></div>
     <div id='two' class'divTwo'></div>
  </div>
</body>
</html>



What is the relation of <div id='one'> to the <div id='two'>? They are both children of the <div id='wrapper'>, this makes them siblings. This would make the <body> the grandparent of the <div> tags.
It's not hard just think of your family tree and that is how it works. Lets get started traversing the DOM shall we.

Traversing the DOM.
What is traversing the DOM?
Traversing is moving up or down the elements of a family tree in the DOM. Lets look at a simple example:
  //select the wrapper div and move down the family tree to the child with
  //the id of one
  $('#wrapper').children('#one');


The above example of traversing down the family tree, but what about going up the tree?
  //select the element with the id of one and move up the 
  //tree to its immediate parent.
  $('#one').parent();


This one is selecting the id of one and moving up the DOM to its parent one level up the tree. There are many jQuery traversing methods available, have a read here for a list of more.

When traversing you need to be aware of what type of traversing you want.
Do you want to filter your selected elements?
//Select the wrapper and then select all the 
//children divs and then select only the one with id one.
$('#wrapper').children('div').filter('#one');


Do you want to follow the family tree?
//select all of the children of id wrapper
$('#wrapper').children();


Knowing what you want and the way your DOM is set up is essential to traversing. Before I write jQuery I generally map all the elements I will be working with on paper first. This will allow you to write more efficient code and chain methods whenever you can.
Next we will be working on manipulating the DOM even more with adding and removing elements and text to your DOM.

I hope this helps and you have fun. Good luck!

Added thanks to andrewsws great observation stated in the comments.
When you are selecting something from the DOM using an id, class or tag name it is best to access them directly. It is also worth noting that you can select elements using almost all the CSS selection methods.
For example:
$('div') //By tag name
$('#one') //By id
$('.divTwo')//By Class
$('div .divTwo')//All elements in divs with a class of one


For a full list of selectors please see the jQuery Docs

2 Comments On This Entry

Page 1 of 1

andrewsw Icon

26 June 2013 - 05:51 PM
Good work :)

I think, though, that you should emphasise that, if an element has an id (#one), this should always be used directly $('#one').

There are, of course, many other ways to to navigate, but I think it worth mention $('#wrapper div').
0

laytonsdad Icon

26 June 2013 - 07:03 PM
This is an excellent point that I skipped in this post by accident. I was going to mention this but it slipped through the cracks. Thank you for pointing that out Andy.
0
Page 1 of 1

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

August 2014

S M T W T F S
      1 2
3456789
10111213141516
17181920212223
24252627282930
31