One of the key elements in javascript codes is getting various elements from the HTML code. This tutorial will cover a few of the getElement types.

Example: What Does A getElement look like?

In the above example, I've assigned the div that has the ID of box certain attributes. That's just a little thing to think of till the end of this tutorial... ;)

getElement Opening
A getElement handler is always opened by document., which means that it is getting the element from the current document. The document. is used in other JS methods, such as write().

getElement Closing
A getElement handler is always closed with brackets (A.K.A () ). You can either put the name of a variable into them or something enclosed in quotes. That something will depend on the type of the getElement.

getElements
Yes, there are also getElement types that are turned into plurals. Why? Because they repeat themselves or can repeat themselves throughout the document. getElement types that are turned into plurals will not be handled like single ones. These will either have to have a number assigned to them or be put into a loop. Below is an example of both with explanations.

The only things I want you to notice in the above example are that the getElement is in plural and that there are square brackets after the closing brackets that include in them a number. Those square brackets with the number are the thing that assigns the number. The number of a certain element is determined according to the amount of times the same element repeats itself before. So, if you count and get to element no. 36, it'll actually be no. 35 in javascript.

Again, I only want you to notice a few things. They are listed below in order of appearance:
1. I inserted the plural getElement into a variable. Why? The name I assigned to the variable is much shorter, and as the getElement repeats itself a few times in the code, it is easier to insert a variable instead of the actual thing.
2. I'm using a for loop in this code. If you do not know what it is, I would suggest looking into derfleurer's tutorial. Back to the subject on hand, the loop will repeat as long as it is smaller than the length of the plural getElement. What is the length? The length is the number of times the element repeats itself. So basically, the loop will go through all the repetitions of the element that is referred to.
3. The if statement will determine what number of repetition to stop on. It'll actually turn the variable stated in the for loop to one or only a few numbers, meaning that you'll be in a level similar to the one in the first example. The difference is, you don't need to count. ;)
4. A reference to element with the set number/s in the if statement. It's pretty similar to the example in the beginning of the tutorial. The difference is that it's a plural getElement, thus you have the square brackets.

getElementById('ID')
Now to the first type of getElement I will be talking about: by id. If you are reading this tutorial, you probably have some basic knowledge in HTML, meaning that you know that various tags can have ids assigned to them. This type of getElement will search for the assigned ID (see the red part in the title), and will then use what it located to set various attributes for it. getElement attributes will be covered later on in this tutorial. Note that getElement by id will be the only non-plural getElement I will be referring to in this tutorial. The reason for it not to be plural is that you can only assign an id to one element at a time.

Side Note: The getElement by id is frequently used to hide things (see attributes section).

getElementsByName('NAME')
The next type of getElement I will be talking about is a plural one: by name. Names are usually assigned to form elements, so you will not be using this type of getElement much (find out why in the forms section). Remember: when using this type of getElement (plural), you must do what the plural section says.

getElementsByTagName('TAG')
The last type of getElement is the most used and most complicated: by tag name. This type of getElement can be used to locate any type of tag in your HTML document, from a simple b tag (bold) to an option tag (part of a drop-down). That can probably answer the question that you were asking yourselves when I said that this is the most used getElement, which was: why? Back to the point, you can replace the red TAG in the title with any tag name that exists. Remember: when using this type of getElement (plural), you must do what the plural section says.

getElement Attributes
getElement attributes are added in the following way:
getElementType.Attribute.Sub-Attribute (if any)="VALUE"

Note: The brown parts are attributes written in their case sensitive form.

Useful Resource: Microsoft's Reference Properties (Attributes) Library

Attribute:style - Below are Sub-Attributes and their Description

display:The most common values are inline, block and none. The block will add spaces on the top and bottom of the element, such as happens with the paragraph tag. The inline will do the exact opposite. The none will make everything inside the element invisible, and is mostly used with divs.

backgroundColor:This will assign a background color to the element. The value is set to a hex.

color:This will assign a text color to the element. The value is set to a hex.

To Make Long Things Short:Style is actually a "css in HTML" tag. Any css attribute can be used in it. The way css attributes are "translated" to JS can be found on the website of Microsoft.

Attribute:parentNode - This would be best explained with an example. <table><tr><td></td><td></td></tr></table> Look at the td tags. They are surrounded by the opening and closing tags of the tr. So the tr is "hugging them". Thus, it is the parentNode. Along the same lines, the table is the parentNode of the tr. Basically, the tags that wrap certain tags are their parentNode. Can you guess what the childNode is?

What To Do With parentNode? The parentNode is actually an additional part of the getElement. Consequently, it can have attributes, just like a regular getElement. That means that you can have the parentNode handler appear multiple times: getElementType.parentNode.parentNode.parentNode.attribute.and so forth.

Are There childNodes Too? Yes, childNodes are the exact opposite of parentNodes. Using my example, the tr is the childNode of the table and the td is the childNode of the tr. If you have noticed, the brown colored text in my question is a plural, meaning that the childNodes attribute needs to be in a loop. Let's see an example of how it's implemented.

In this example, you might notice that I first got the TD element and assigned it a number. Then, I assigned that getElement a childNodes attribute. Afterward, I looped through the childNodes to find the one that I'm looking for. Like I explained above, parentNode (and thus also childNodes) is part of the getElement, so all getElement rules apply on it, including finding the needed one with a loop or assigning a number.

Attribute:className - There's no need to elaborate much about this attribute. The className attribute is quite obvious: it is used to assign a certain class to an element.

Attribute:width - Again, there's no need to elaborate much about this attribute. What it does is pretty obvious: assign a width to the referred to element.

Attribute:innerHTML - This attribute is used to make various actions with the HTML or text that are inside the referred to element. Below are Sub-Attributes and their Description.

replace:Used to replace parts of the contents of the referred to element. The way this attribute is used differs from the standard.

First, notice that I wrote that the contents of the element equal the replacement. Second, I would like you to notice the replace attribute has brackets next to it, with 2 words in quotes and a comma between. The left part is what the code looks for and the right part is what it will be replaced with. All the rules of document.write() apply on the contents of the quotes (including variable insertion).

Wait, I Think I Know What's Going On Here!

If you're thinking that all HTML attributes can be referred to (according to the above explanations), you are almost right. There are two HTML attributes that I know of that cannot be referred to when using the getElement tag: name (see why in the forms section), and id. There is a small problem that can easily be fixed with referring to HTML attributes: how do you know what the javascript case sensitive form of it is? I'd suggest using Microsoft's "library" which has all of the attributes in it with their HTML form and JS translation.

Attribute:nodeName
This will return the tag name of the element you are referring to. This attribute is only used either in an if statements to check the nodeName or to return the nodeName (with document.write for example), it cannot be set or reset.

Get An Element Inside An Element
Many elements have other elements inside them. For example a td sometimes has a font tag or a b tag in it. You can get that element using the childNodes attribute, or you can follow the below example.

I would like you to notice the row below the variable. You can see that I took the getElement and assigned it another getElement as an attribute. The same rules of the regular getElement apply on a getElement inside a getElement.

To End This: How Do I Write Each of the getElement Types?
By Name: document.getElementsByName('NAME-OF-ELEMENT')
By ID: document.getElementById('ID-OF-ELEMENT')

By Tag Name: document.getElementsByTagName('TAG-NAME-OF-ELEMENT')

The reactions between forms and JS are based on one of the getElement types: by name. You probably remember that I said you will not be using the byName type much because names are usually assigned to form elements, and I will now tell you that what I said wasn't accurate. Why? Look at the below code and try to find the answer by yourself.

Doesn't that look awfully familiar? There's a document. at the beggining and a replace attribute. So, what is that actually? The above is a referral to a form and one of it's elements. Let's translate that to a getElement.

Both codes would actually do the same thing, but the first one is quite a few lines shorter. My point is, the first one is actually a getElement, but in a shortened form without loops or number assignments. In order of appearence: the postForm is the name of the form that we are referring to and the message is one of the fields of that form. That's the way we write things when we refer to various form fields in javascript. Forms have only one attribute that I can think of which does not appear in the actual HTML code which is: submit. If you make a button and make it's onclick equal to: document.postForm.submit(), the form named postForm will be submitted when the button is clicked.

I hope my explanations were clear enough and that I covered all the subjects that should be covered. Fell free to PM me if you want me to elaborate on a certain subject, improve my explantions, or add something new to this tutorial that seems missing to you.

~The Dog Monster