“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.”
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?
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.
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?
How do we do such a thing you ask, well lets create an example document like so:
My First DOM Scripting LessonTHIS 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:
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.
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:
(fun things to try is to change .id to something like .style.background or .style.width or even .innerHTML)
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:
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:
Then our next step would be to use the “parent” variable with “getElementsByTagName” again to get the second elements contents like so:
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:
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:
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?
Devin R. Olsen