본문 바로가기
카테고리 없음

getElementById Method

by 엔돌슨 2008. 3. 4.
반응형
http://msdn2.microsoft.com/en-us/library/ms536437(VS.85).aspx
위에 링크에 관련된것이 더 많다.
getElementById Method

Returns a reference to the first object with the specified value of the ID attribute.

Syntax

oElement = document.getElementById(sIDValue)

Parameters

sIDValue Required. A String that specifies the value of an ID attribute.

Return Value

Returns the first object with the same ID attribute as the specified value.

Remarks

If the ID value belongs to a collection, the getElementById method returns the first object in the collection.

Example

This example uses the getElementById method to return the first occurrence of the ID attribute value, oDiv.

<SCRIPT>
function fnGetId(){
   // Returns the first DIV element in the collection.
   var oVDiv=document.getElementById("oDiv1");
}
</SCRIPT>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">

Standards Information

This method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 World Wide Web link.

Applies To

document

See Also

About the W3C Document Object Model
Tags What's this?: Add a tag
Community Content
 
Add Community Content
Doesn't work with anchors...     sam-pablo-kuper ... John Sudds - MSFT   |   Edit   |   Show History

This doesn't seem to return anchors properly. That is, on an HTML page with the following in the body:

<p>Here is an anchor:
<br><a id="blar"></a>Blar
</p>

the following javascript returns nothing:

document.onload = alert(document.getElementById('blar'));

This is a sorry state of affairs, is it not?

-- It certainly might be, if the code were doing what you think it is. However, you have a few errors:

  • The alert statement itself must be inside a function block; otherwise, you are assigning the return value of the call to the event handler.
  • The onload event handler is on the window object, not the document object.

Here is the correct code, which returns the anticipated value of "[object]":

window.onload = function() 
{
alert(typeof(document.getElementById('blar')));
}

(jsudds)

Be Careful! - This method also incorrectly matches on the NAME attribute     stuartg2k ... Noelle Mallory - MSFT   |   Edit   |   Show History

It should be noted, that this method also matches on the name attribute, thus if you had say:

<meta name="description" content="matching on this is a bug"/>

<!-- All your code... -->

<textarea name="description" id="description">This is information about the bug</textarea>

In W3C compliant browsers, document.getElementById('description'); would match on the form field, not the meta tag!!!

Tags What's this?: dhtml (x) docbug (x) Add a tag
Workaround to make document.getElementById() follow W3C standard and only match on id     jmaxwilson ... John Sudds - MSFT   |   Edit   |   Show History

You can make Internet Explorer's document.getElementById() method work according to W3C standards and only return elements with matching id and not name by overriding the native function in JavaScript like this:

if (/msie/i.test (navigator.userAgent)) //only override IE
{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id)
{
var elem = document.nativeGetElementById(id);
if(elem)
{
//make sure that it is a valid match on id
if(elem.attributes['id'].value == id)
{
return elem;
}
else
{
//otherwise find the correct element
for(var i=1;i<document.all[id].length;i++)
{
if(document.all[id][i].attributes['id'].value == id)
{
return document.all[id][i];
}
}
}
}
return null;
}
}

Workaround attributed to http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html
Workaround revised to work around a different error in IE's implementation of getAttribute() see:
http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes

Tags What's this?: bug (x) dhtml (x) Add a tag
Undocumented restriction or bug     ASiby ... John Sudds - MSFT   |   Edit   |   Show History
This method will return an error if the ID attribute provided to the method is identical to the name of a variable or a function being used in the javascript code.

This will generate the message "Object doesn't support this property or method"

<SCRIPT>
function fnGetId(){
   // Returns the first DIV element in the collection.
   var oDiv1=document.getElementById("oDiv1");
}
</SCRIPT>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">

[jsudds] This isn't a "working" example of the problem. The script here, which was copied from the topic above, does not generate an error message. I tried to implement the behavior you describe, by using the script name and a global object, but both IE6 and IE7 run it flawlessly.

<script type="text/javascript">
function fnGetId()
{
   var oDiv1 = document.getElementById("fnGetId");
alert(oDiv1.innerHTML);

var oDiv2 = document.getElementById("window");
alert(oDiv2.innerHTML);
}
</script>
<div id="fnGetId">Div #1</div>
<div id="window">Div #2</div>
<input type="button" value="Get Names" onclick="fnGetId()"/>

Can you provide a repro?

Tags What's this?: Add a tag