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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First DOM Scripting Lesson</title> </head> <body> <div id="myFirstDOMElement" style="width:100px; height:105px; background:#000; color:#fff; text-align:center;"> THIS IS MY FIRST DOM ELEMENT!!</div> <script type="text/javascript"> </script> </body> </html>
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:
<script type="text/javascript"> var element = document.getElementById(); </script>
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.
<script type="text/javascript">
var element = document.getElementById("myFirstDOMElement");
</script>
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:
<script type="text/javascript">
var element = document.getElementById("myFirstDOMElement");
alert(element.id);
</script>
(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:
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.id);
</script>
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:
<div> <div id="myFirstDOMElement" style="width:100px; height:105px; background:#000; color:#fff; text-align:center;"> THIS IS MY FIRST DOM ELEMENT!! </div> <div style="width:100px; height:105px; background:#000; color:#fff; text-align:center;"> THIS IS MY SECOND DOM ELEMENT!! </div> </div>
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:
<script type="text/javascript">
var parent = document.getElementsByTagName("div")[0];
</script>
Then our next step would be to use the “parent” variable with “getElementsByTagName” again to get the second elements contents like so:
<script type="text/javascript">var parent = document.getElementsByTagName("div")[0];
var element = parent.getElementsByTagName("div")[1];
alert(element.innerHTML);
</script>
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:
<script type="text/javascript">
var first = document.getElementById("myFirstDOMElement");
var element = first.nextSibling;alert(element.innerHTML);
</script>
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:
<script type="text/javascript">
var first = document.getElementById("myFirstDOMElement");
var parent = first.parentNode;
var element = parent.getElementsByTagName("div")[1];
alert(element.innerHTML);
</script>
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
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”
just started learning JS and dom after finding your site. absolutly loving all of it, marvelous work.
wow. thanks for helping others.
your site is such a great help!
I always enjoy feedback from my readers!