Modifying The World Around You

Javascript Tutorial 3

Alright! Session 3!
Time to get into document.getElementByID() , document.getElementsByTagName() , and .innerHTML !!

Lets dive right in shall we?
Stating with document.getElementByID().

document.getElementByID() :

document.getElementByID()

 

<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").innerHTML;

document.write(iuser);
</script>

So what do you see? a variable using the new document.getElementByID() or TagName() with .innerHTML and the document.write writing the variable like we learned in the last tutorial.

so what does this all mean? document.getElementByID() does this... when the browser read this it already knows what ID's and Classes are on the page. Since you should already know IDs are only on the page once we use .getElementByID() . Now remember this is case sensitive!! So we grabed that Element with the ID of userlinks. AWESOME! now the .innerHTML basically means it is grabbing everything inside that Element.

Than we are writing all the stuff inside the element using the document.write()

got that? good moving on

document.getElementsByTagName() :

document.getElementsByTagName()

 

<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").getElementsByTagName("a")[0].innerHTML;

document.write(iuser);
</script>

Alright same code as above except we used .getElementsByTagName("a") after the document.getElementByID("userlinks") What does this mean? and What is that [0] mean now?! OMG YOUR CONFUSING ME! don't fret! Lets look at this one step at a time.
1) we have a variable [which we learned how to use before]
2) we have the document.getElementByID("userlinks") [which we just learned on what it does]
3) we have .getElementsByTagName("a")

ok what does that mean? it means that it will look at all the tag names within that element. in this case the element with the ID of userlinks. Remember when you use .getElementsByTagName("a") you MUST have an "s" after Element why? because you can have multiple elements of that tag. just like if you were to use div instead of that "a" you have multiple "div"s on a page. hence you need to use the "s". now that we have a basic understanding of .getElementsByTagName("a") lets move on.

4.) we have a [0]

What the heck is that?!
well if you look before that we have the ID of userlinks and we are calling all the "a" tags inside the userlinks element. so since there are many "a" tags inside that element the [0] tells is which one we want. [0] called the first "a" tag it sees. so if we used [1] it would be the second "a" tag. So why don't we use [1] as the first ? because it starts at 0
hope you understood that a little bit

5) we have .innerHTML [which we kind of went over]

alright so lets look at this over as a whole.

document.getElementsByTagName()

 

<script type="text"/javascript">
var iuser = document.getElementByID("userlinks").getElementsByTagName("a")[0].innerHTML;

document.write(iuser);
</script>

in the variable "iuser" we are calling the Element with ID of userlinks, and inside that element we are looking at the "a" tags and since we have the [0] we are looking at the first "a" tag in the Element of userlinks. Since we would be using this on IF that would be the Portal link. than we are using .innerHTML to grab the word "Portal". once we have that we are writing it using document.write().

I hope you understand that tutorial a little bit. If you have any questions please feel free to post and i will try my best to answer them.

Next Up: If statements and For loops

1. Add new comment:

   Post Comment