- Note - this tutorial uses the following hyperlink as example, in a hypothetical test page:
<a href="index.html" id="homeLink">Home</a> - The getElementById() method is the most common in the JavaScript DOM; it retrieves an element based on its id attribute, which you pass as a string argument. Let's change our link's color:
document.getElementById("homeLink").style.color = "green";Tip: don't forget to enclose the id argument in single or double-quotes, or JavaScript will be looking for a variable named homeLink in your script (which it probably won't find!)
- This method only works if it finds an element with that id: the id attribute is case-sensitive, so make your capitalization match on the HTML and JavaScript side. This code does not work:
document.getElementById("HomeLink").style.color = "green"; // Error! Caveat: by definition ("unique identifier"), a given id should only occur once per HTML doc. If it is used multiple times, the web browser's JavaScript interpreter will typically pick the first one it finds, and ignore the others - but that behavior is not reliably predictable.
- To avoid script errors or handle them, always check if the element exists first:
if( document.getElementById("homeLink") != null ) // Does it exist?But because null evaluates to false, you can also use this shortcut to see if an element exists:
document.getElementById("homeLink").style.color = "red";
else
alert("There's no element homeLink on this page!");if( document.getElementById("homeLink") ) // Only true if found
alert("homeLink exists on this page!"); - jQuery confusion: remember that getElementById() doesn't need a "#" character. The first line of code will *not* work, since no element has an id set to "#homeLink":
document.getElementById("#homeLink").style.color = "blue"; // WRONG!
$("#homeLink").css("color","blue"); // CORRECT in jQuery :-)
Email AOL Mail Gmail Hotmail Yahoo Mail MS Office Excel 2010 OneNote 2010 Outlook 2010 Word 2010 OS & Devices Kindle Fire Windows 7 Web Dev C# and .NET JavaScript jQuery