Hello Sitepointers,
There are many questions here in the JavaScript forum that essentially allude to similar answers.

I am going to start a 'multi-part series' thread for those who are new to JavaScript or still getting their feet wet. The following posts will specifically outline introductory concepts and be targeted toward web developers who are missing the third piece of the trinity (JavaScript). Those three pieces being (X)HTML (content & markup), CSS (Presentation / Look & Feel), and DOM Scripting using JavaScript (Behavior / Interaction).

Therefore, if you're already knee deep in HTML and CSS, and you want to jump to the next level, this will be perfect for you.

These teachings are considered "Introductory" and should be treated as such.

=============================================

Targeting an element
In this example we will use a portion of markup as our base content.
Code:
<div id="example">
  <h2>Sample Header</h2>
  <ul>
	<li>list item one</li>
	<li>list item two</li>
	<li>list item three</li>
  </ul>
</div>
CSS
In CSS, if we wanted to target the element that has an id of "example" - our style rule would look like this:
Code:
#example {
  /* my properties here */
}
Of course if we wanted to target the <h2> element within the container that has an id of "example" - our style rule would look like this:
Code:
#example h2 {
  /* my properties here */
}
Wonderful. That was easy wasn't it
JavaScript
In JavaScript we have similar methods of obtaining an element. Although the syntax is a bit different, you'll find that it makes a bit more sense to "speak out loud" as to which elements you want to target.

Let's first start off by targeting an element with an id of "example". Here's how it would look in JavaScript
Code:
document.getElementById('example');
At first glance you might be wondering what 'document' is. In this case 'document' is our outer root node (even above the <html> element). As you also might have noticed, we used a built-in DOM method called "getElementById." And as you can see, it does exactly what we wanted it to.

The method "getElementById" always requires that you put a parent element in front of it. In our example we used "document." In any case, however, it is pretty much safe at all times to use "document," meaning you shouldn't ever have to worry about using something else besides "document."

Targeting the h2 element
Of course you might be wondering how we're going to get our <h2> element within our snippet of HTML. One simple way we can achieve this is to add an id to our <h2> as follows:
Code:
<div id="example">
  <h2 id="sample-header">Sample Header</h2>
  <ul>
	<li>list item one</li>
	<li>list item two</li>
	<li>list item three</li>
  </ul>
</div>
Since we are already familiar with our "getElementById" method, we can use that as shown below:
Code:
document.getElementById('sample-header');
Variable assignment and referencing
In programming languages (like JavaScript), variable assignment is key. In this next demonstration we will assign our reference to an element to a variable in JavaScript.
Code:
var el = document.getElementById('example');
Here we have assigned a reference of the element with id of "example" to a variable called "el." This must be understood before we move on.

Coming up Next: arrays & "getElementsByTagName"
In the next post we will learn how to target multiple elements. Stay tuned.