The Javascript getElementById method is, perhaps, one of the most important methods in the language. It allows you to access in HTML element that has an id attribute and value. Once you access the element you can manipulate its stylesheet, read its content, or change its internal HTML. In this tutorial Mark demonstrates the Javascript getElementById method and explains how you can use it most effectively.
The code created in this tutorial appears below.
Starting Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Understanding Get Element By Id</title> </head> <body> <div id="information"> <p>Lorem ipsum dolor sit amet, <span id="highlight">consectetur adipiscing elit.</span> Donec egestas metus vitae ipsum feugiat quis euismod leo molestie. Curabitur egestas nulla enim. Sed pulvinar luctus risus, non dapibus purus porta ac. Vivamus eleifend ullamcorper ipsum et dictum. Mauris fringilla venenatis ante, et iaculis dolor faucibus at. Duis molestie pharetra ipsum eget elementum. Etiam dictum scelerisque tincidunt. Donec ut diam urna, non ornare nunc. Etiam a turpis ac libero feugiat accumsan a a nunc. Praesent vel orci in purus ornare convallis. In a arcu risus, eu egestas dolor. Sed bibendum posuere augue, congue sollicitudin lectus mattis eu. Maecenas in orci ac ligula tincidunt pharetra. Nulla at sem at lacus volutpat congue et eu mi. Maecenas lacinia viverra augue, a lacinia nisl vulputate ut. Duis in sollicitudin velit. Cras a mauris mi. Curabitur feugiat elit eget turpis facilisis porta. Suspendisse suscipit, lorem ut pulvinar dapibus, nibh lectus suscipit lacus, at accumsan enim neque vel arcu. Etiam luctus lacus vitae arcu hendrerit ullamcorper.</p> </div> <p>What do you think? <br/><input type="text" id="think"> </p> <input type="button" id="change" onclick="changeContent()" value="Change Content"/> </body> </html> |
Completed Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Understanding Get Element By Id</title> <script language="javascript" type="text/javascript"> function changeContent() { document.getElementById("highlight").style.backgroundColor = "#990000"; document.getElementById("highlight").style.color = "white"; document.getElementById("information").style.border= "thin black solid"; var textContent = document.getElementById("think").value; alert(textContent); document.getElementById("information").innerHTML = "<h2>This content has been changed dynamically with getElementById()"; } </script> </head> <body> <div id="information"> <p>Lorem ipsum dolor sit amet, <span id="highlight">consectetur adipiscing elit.</span> Donec egestas metus vitae ipsum feugiat quis euismod leo molestie. Curabitur egestas nulla enim. Sed pulvinar luctus risus, non dapibus purus porta ac. Vivamus eleifend ullamcorper ipsum et dictum. Mauris fringilla venenatis ante, et iaculis dolor faucibus at. Duis molestie pharetra ipsum eget elementum. Etiam dictum scelerisque tincidunt. Donec ut diam urna, non ornare nunc. Etiam a turpis ac libero feugiat accumsan a a nunc. Praesent vel orci in purus ornare convallis. In a arcu risus, eu egestas dolor. Sed bibendum posuere augue, congue sollicitudin lectus mattis eu. Maecenas in orci ac ligula tincidunt pharetra. Nulla at sem at lacus volutpat congue et eu mi. Maecenas lacinia viverra augue, a lacinia nisl vulputate ut. Duis in sollicitudin velit. Cras a mauris mi. Curabitur feugiat elit eget turpis facilisis porta. Suspendisse suscipit, lorem ut pulvinar dapibus, nibh lectus suscipit lacus, at accumsan enim neque vel arcu. Etiam luctus lacus vitae arcu hendrerit ullamcorper.</p> </div> <p>What do you think? <br/><input type="text" id="think"> </p> <input type="button" id="change" onclick="changeContent()" value="Change Content"/> </body> </html> |
