getElementById

[arpan]

Suppose I have the following JavaScript code:

<style type=&quot;text/css&quot;>
#box1{
position: absolute;
top: 20px;
left: 50px;
width: 200px;
border: solid #ff0000 3px;
background-color: #ffff00;
color: #000000;
padding: 10px;
}
</style>
<script language=&quot;JavaScript&quot;>
function change(){
document.getElementById(&quot;box1&quot.style.borderColor=&quot;#0000FF&quot;;
document.getElementById(&quot;box1&quot.style.backgroundColor=&quot;#000000&quot;;
document.getElementById(&quot;box1&quot.style.color=&quot;#FFFFFF&quot;;
}
</script>
<div id=&quot;box1&quot; onMouseOver=&quot;change()&quot;>
<h3>GOOD MORNING</h3>

As such, the above code works fine but instead of using getElementById (the part of the code shown in brown), the same effect can be given using the following code:

<script language=&quot;JavaScript&quot;>
function change(){
box1.style.borderColor=&quot;#0000FF&quot;;
box1.style.backgroundColor=&quot;#000000&quot;;
box1.style.color=&quot;#FFFFFF&quot;;
}
</script>

Then what for is getElementById used in the first code? Under what circumstances should getElementById be used?

Thanks,

Arpan

 

[harmmeijer]

When you use box1.style.borderColor... then you are using an absolute reference to the object (document.box1).
document.getElementById(&quot;...&quot allso gets an element/elements if the element is not a direct child of the document. If more elements have the same id it will return an array of elements.
document.getElementsByName allways returns an array of elements.
see code below:

<form id=&quot;form&quot;>
<input type=text id=&quot;box1&quot; onmouseover=&quot;change()&quot; value=&quot;myvalue&quot;>
</form>
<script language=&quot;JavaScript&quot;>
function change(){
try{
alert(box1.value);
}catch(e){
alert(&quot;absolute path is not correct, the error is: \n&quot; + e.description);
alert(&quot;this is correct: &quot; + form.box1.value);
}
}
</script>

For a <div> it does not matter if it is in a form or not (in IE 6)
If you want a function to execute on an event of the object you could leave out absolute path or getElement... alltogether:

<style type=&quot;text/css&quot;>
#box1{
position: absolute;
top: 20px;
left: 50px;
width: 200px;
border: solid #ff0000 3px;
background-color: #ffff00;
color: #000000;
padding: 10px;
}
</style>
<script language=&quot;JavaScript&quot;>
function change(objDiv){
objDiv.style.borderColor=&quot;#0000FF&quot;;
objDiv.style.backgroundColor=&quot;#000000&quot;;
objDiv.style.color=&quot;#FFFFFF&quot;;
}
</script>
<div id=&quot;box1&quot; onMouseOver=&quot;change(this)&quot;>
<h3>GOOD MORNING</h3>




Greetings, Harm Meijer

 

[iza]

it's cleaner, it's more readable, it's conform to the DOM, it respects standards, and, the key point is : it's cross browser (try the above code - the one with box1.style.bordercolor - in netscape6 ... then in ie6 ...) !

 

[jemminger]

a correction to harmmeijer's post:

getElementById() will only return ONE element, the FIRST element with the id specified. you should never have more than one element with the same id in a document.

getElementsByName() will return an array if the specified name occurs more than once.





=========================================================
while (!succeed) try();
-jeff

 

[xutopia]

Examples :

getElementsByName

http://www.mozilla.org/docs/dom/domref/dom_doc_ref49.html

getElementById

http://www.mozilla.org/docs/dom/domref/dom_doc_ref48.html#1025944

Gary

http://www.xutopia.com

Haran
==========================