Learning Intermediate JavaScript Faster Than Ever!

“I feel I have painted my self into a corner with these tutorial titles for the simple fact that one persons advance is another persons child’s play. Who is to say whats intermediate and whats really advanced? No one is, and that’s my point.”

“In no way am I saying this is as intermediate or advanced as JavaScript gets! I would also like to point out that this may very well not be what you would consider to be intermediate or advanced JavaScript techniques. So with that said, I ask you to think before you post idiotic comments because, at one point you too were a beginner. This is what this series is about and who it’s for.”

Today we are going to take a step further down the path of  JavaScript greatness. Last time we learned a whole bunch about the basics of JavaScript. We learned what a variable is, how we can store information into them and how we can use that information. We also learned how to make a function and pass variables to a function in two different ways. We even learned about if else conditions.

Lets take it up a notch shall we? Instead of plundering into the massive amounts of native function JavaScript has to offer, let’s go a different direction. Let talk a little about Document Object Modeling or DOM Scripting for short.

So how do we begin to learn DOM you ask? Simple in order to learn it we must break it down in to very simple questions.

– What is DOM Scripting?

– When Do I Use DOM Scripting?

– How Do I Use DOM Scripting?

Lets begin shall we…

What is DOM Scripting?

DOM Scripting is an important asset to any JavaScript expert, but what is DOM Scripting and why are we learning DOM Scripting when we are here to learn freaking JavaScript? Ok first, DOM Scripting IS JavaScript you see, its simply a better way of gathering elements, attributes and values to do some really cool stuff. DOM is also W3C recommended for valid JavaScript across all major browsers.

When Do I use DOM Scripting?

If and when you are creating a script and it needs to gather, place or manipulate values or even elements them self’s you are going to be using DOM Scripting FACT.

DOM scripting has taken on its own form aside from JavaScript because it’s a collation of how to do things right across all browser the first time. Many people make the mistake of trying to learn everything about JavaScript first but are left wondering how to gather information out of elements. This is why I took our lesson today to this area proceeding our first tutorial. So again when do you use DOM Scripting? When ever you need to manipulate or receive something from an element.

How Do I use DOM Scripting?

The name says it all my friend.

Document (refers to the document the script is being performed on.)

Object (refers to the object or element our script is trying to get at.)

Modeling (modeling is what we do with the object or get out of the object once we have retrieved it.)

Don’t feel over whelmed if the above did not make sense right now, simple think about it like this.

When ever you visit a web page, each page is a document correct?

Each document is made up of different elements that makes up the web site correct?

If we had some JavaScript to run on one of these pages, most of the JavaScript would be dealing with these elements or values from elements right?

So the whole goal here is to be able to identify a document, grab any of its elements, and model the element or information from the element however we want with our JavaScript.

How do we do such a thing you ask, well lets create an example document like so:




My First DOM Scripting Lesson



THIS IS MY FIRST DOM ELEMENT!!
%MINIFYHTMLa0721544b40f11008986ad97bbf8605d4%%MINIFYHTMLa0721544b40f11008986ad97bbf8605d5%%MINIFYHTMLa0721544b40f11008986ad97bbf8605d6%%MINIFYHTMLa0721544b40f11008986ad97bbf8605d7%

See our element between our body tags? It has an id of “myFirstDOMElement” so I am planing on trying to gather information out of this element by finding the element through its id alone. To do this, let’s go down to our script tags in our body and create a new variable like so:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d8%

Ok our new variable is named “element” and its equaling its self to first “document” to identify this document, then it’s using a native DOM function called “getElementById“. We fallow up the “getElementById” with a pair of parentheses and a semicolon to finish off the variable declaration. Next lets add the name of the element we wish to equal our variable too.

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d9%

To give our DOM “getElementById” function a name of an element, we go into the parentheses and add quotation marks and finally the name of the element we wish to gather.

Guess what folks you just made your very first DOM call!

In reality we have only covered the document and object portion of DOM scripting if you will. The next part is the modeling of the element or its information. Lets do something with this element now that we have gathered it shall we.

Let first alert the id of the element out to use like so:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d10%

(fun things to try is to change .id to something like .style.background or .style.width or even .innerHTML)
Here we are first using our “element” variable that we gathered with DOM and then, we alert its id attribute or rather the id value “.id“. (In our last tutorial we covered the alert JavaScript feature.)

Holy crap it works!!

Ok to move forward with our lesson lets talk about the different ways a person can gather elements with DOM.

Our above example used “getElementById” but what if an id is not present or available for uses? We can use the “getElementsByTagName” to gather our element simple by the type of element it is.

(PLEASE note that this is “getElements” vs. our above “getElement“.)

This means with “getElementsByTagName” you are literally gathering every element on the page that is of the same type.

So how can one narrow down what element we want to get with “getElementsByTagName“? Well in the eyes of DOM each element is suppose to have a unique array number among each elements siblings elements. Soooo if we wanted to get our “example element” with the “getElementByTagName” we would do something like this:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d11%

Notice how we first identify the document, then use the “getElementsByTagName” and use our examples element type. Now see how we have appended a pair of brackets containing a zero.

This appended number at the end our DOM call is this document array number I was talking about. Always note that 0 really means 1 or rather the first element, and it goes up from their.

Because our document only has one div element, we gather it with the “getElementByTagName” followed by its element array number 0.

Lets do something a little tricky with our example script now and learn a little about the parent and sibling DOM calls. Update your HTML to the following:

THIS IS MY FIRST DOM ELEMENT!!
THIS IS MY SECOND DOM ELEMENT!!

Lets make a scenario that needs us to gather the contents of our second element. How would we go about gathering this or its information? The obvious way would be to first gather the first div or rather root element that contains our two other div elements like so:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d12%

Then our next step would be to use the “parent” variable with “getElementsByTagName” again to get the second elements contents like so:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d13%

But, this is to arbitrary if you ask me… lets do something  crazy and learn more shall we! Instead of gathering our first or rather root element if you will, lets point to our element with the id of “myFirstDOMElement“. Then let us introduce a new DOM feature called “nextSibling” like so:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d14%

The “nextSibling” is just that, a way to move from one sibling element to another as long as the elements are truly siblings and not nested further from each other. There is also “previousSibing” and the same requirements or rather rules apply to this DOM call as well.

Ok so we now have a “nextSibling” and “previousSibling” but whats up with all these children DOM calls running around without any parents?

Lol well there actually is a “parentNode” DOM call and it simply jumps or traverses from a nested element, out to its parent element and only its parent element.

Great! Lets shake it up one more time and try to use all the DOM calls we have learned thus far. Here is what I have comp up with for fun:

%MINIFYHTMLa0721544b40f11008986ad97bbf8605d15%

Awesome!

Ok so we know we can get elements by a tag names or even by an id or rather attribute and even how to traverse from sibling to parent elements, but what other attributes can a person gather elements with?

getElementsByClassName“. Here we are pointing or rather gathering elements with a particular class name or attribute. Because it’s a class name we are after, and classes are non unique attributes like id’s we again are gathering all elements with a class name of our choice. All of this these DOM calls are methods to perform whats commonly called DOM Traversing.

Lets recap here what we have learned shall we?

Today we learned that DOM Scripting is a better way to gather elements or their values to perform JavaScript results out to us. We broke down Document Object Modeling and found it really means that we first identify the object, gather elements and use these elements or their values to model out results to us. We also learned how to use DOM to traverse to and from different elements based on their attributes or element type. We even learned that each element has a unique array number associated to it with in its sibling elements nested level.

There is much more to learn about DOM but I assure you, if you have completely understood this tutorial then you have a strong foundation to work with and gather elements for most scenarios faced with JavaScript.

And that’s your Intermediate JavaScript Lesson everyone!

Next we will be using all that we have learned from our first two lesson while digging deeper in to more native JavaScript features.

Thanks Everyone!

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus

19 Responses to “Learning Intermediate JavaScript Faster Than Ever!”

  1. I learned the lesson 1 and lesson 2 from your website.Where is the lesson 3.I cant find it.By the way this is the best website i have seen ever for learning javascript.

  2. […] Lesson Two: Learning Intermediate JavaScript Faster Than Ever! […]

  3. Nick says:

    Hello there, I’m trying to learn Javascript and DOM and have come across your tutorials. I’ve no experience in DOM up until now but I’m having a massively frustrating issue with some of the above.

    I use Sublime Text 2 to code in and I can easily select elements using document.getElementById(“”), but even after copying your HTML and the corresponding script and pasting it, the nextSibling doesn’t work at all. I get the alert, but it just says “undefined”. Also, the getElementByClassName doesn’t work at all. If I type getElementById, the text turns blue when I open the parenthesis, but if I type getElementsByClassName, it stays white as though it’s not a recognised command. I’m at a complete loss having scoured the internet and it’s stopping me going further. Everything is exactly as it is in your examples but everything after the ID selectors just don’t work. Please help, I’m going absolutely crazy with this!

    Thanks in Advance.

    • Dandelion says:

      I realize the comment about nextSibling not working is over a year old, but in case anyone else runs into the same issue (as I did) and wishes to know how to solve it:

      The white space between the two elements is why element.nextSibling returns as undefined. Some browsers treat the white space as a node itself. That means the sibling order would be: .
      You could change the line to:
      element = first.nextSibling.nextSibling;
      or simply add:
      element = element.nextSibling;
      after “element = first.nextSibling;” and this will advance you to the second div node.

  4. Navas karim says:

    Easy to understand. Looking for lesson 3?

    Thanks for the posts

  5. John Feynman says:

    Thanks for the helpful tutorial. I needed a fast recap of JavaScript and your tutorial seems like it is perfect for this.

  6. Scott Brand says:

    Good information. Thanks it helped to understand DOM. Very clear and concise. Look forward to lesson 3.

  7. carl says:

    wheres lesson 3…???….dont stop now

  8. Tim says:

    The last one i tried doesnt work. HELP! it keeps the page the same. whats it ‘possed to do?

  9. think says:

    Thank you very much. Yours lesson is very useful for me.

  10. bikram says:

    isnt there lesson three???

  11. Fatima says:

    Amaaaazing, new JS learner and your website is a bless, thaaaanks a lot

  12. m says:

    Very Good! Thanks a lot.

  13. Carla S says:

    Thank you for your extremely user friendly and helpful tutorial. I tried learning JavaScript through W3 School and yours, in my humble opinion, is much easier and constructively laid out.

  14. Lexi says:

    Reader’s new year might be brighter after reading this post!

  15. Ben says:

    Are you able to explain why this doesn’t work?

    bottom eleement

    parent element
    THIS IS MY FIRST DOM ELEMENT!!

    THIS IS MY SECOND DOM ELEMENT!!

    var top = document.getElementById(“bottomDOM”);
    top.innerHTML = (“changes?”);
    var element = top.nextSibling;
    element.innerHTML = (“Wooooo”);

    The “parent element” text doesn’t change to “Woooo”

  16. Ben says:

    just started learning JS and dom after finding your site. absolutly loving all of it, marvelous work.

  17. Ryan says:

    wow. thanks for helping others.
    your site is such a great help!

  18. I always enjoy feedback from my readers!

Leave a Reply