What exactly are the 'name', 'class', and 'id' attributes of objects in my page for?

Question

Trying to remember how this worked...

Answer 1

For JavaScript, you can use these attributes to get elements.

ex: document.getElementsByName("foo")[0]; // returns the first element with the "name" attribute equal to "foo".

Id and class are fairly the same in this way, except with id, there is only one element.

ex: document.getElementById("blah"); // Element is singular and there is no [0] array identifier. Returns the ONLY element with the id attribute "blah".

Answer 2

The name attribute applies to form elements. It is an old attribute that allows dot-referencing into the namespace of the form that contains the element. For instance, if you had a form with the following components

<form name="myForm>

<input type="text" name="myInput" />

You could get a reference to the form by

var myFormRef = document.forms['myForm']

In that approach, the name is an index into the associative array forms, which is a(n array) property of the document object.

Then, you could get a reference to the input as

myFormRef.myInput

The class attribute is for giving properties to multiple elements that  should have similar facets. For instance, some but not all h2 headers might be centered and colored red. By defining a class in CSS

h2.centerRed {

color: red;

text-align: center;

}

That class can be assigned to the h2 elements that should display those values for those properties as

<h2 class="centerRed">header content</h2>

The class can also be used in JavaScript-ing to identify collections of elements that should be treated differently from elements without the class. A collection of all h2 elements in document can be retrieved as

var h2s = document.getElementsByTagName( 'H2' );

A script could then operate on only the h2 elements with the centerRed class by using conditional processing such as

for (var i = 0; i < h2s.length; i++) {

if ('centerRed' == h2s[i].className) {

// do the specific operations for these elements

}

}

The id attribute is used to identify a single unique element regardless of tag type. Ids can be used to establish style properties. It can be used in scripting to get a reference to the element of which it is attached. There is document method named getElementById() that will retrieve a reference to the uniquely identified element in the page by giving the string value of the associated id.

That's the view from 30,000 feet.

Added: Few elements need both name and id; either, alone, would suffice to provide unique identification of most elements. The id SHOULD be absolutely unique. The name should usually occur uniquely within the namespace of its parent form with the exception that grouped radio buttons share the same value of the name attribute in order for the browser to enforce that only ONE of the radio buttons can be selected at any one time.

Answer 3

id is the object id

name is just the name

class is the programing class