You are almost certainly running your code before the DOM is constructed. Try running your code in a window.onload handler function (but see note below):
window.onload = function() {
// all of your code goes in here
// it runs after the DOM is built
}
Another popular cross-browser solution is to put your <script> block just before the closing </body> tag. This could be the best solution for you, depending on your needs:
<html>
<body>
<!-- all of your HTML goes here... -->
<script>
// code in this final script element can use all of the DOM
</script>
</body>
</html>
- Note that
window.onload will wait until all images and subframes have loaded, which might be a long time after the DOM is built. You could also use document.addEventListener("DOMContentLoaded", function(){...}) to avoid this problem, but this is not supported cross-browser. The bottom-of-body trick is both cross-browser and runs as soon as the DOM is complete.
