关于document.getElementById()的一些问题，为何在不同函数当中有些能取对象有些不能取？

Question

window.onload = function positionmessage() { var ele = document.getElementById("message"); console.log("window onload=" + ele); ele.style.position = "absolute"; ele.style.top = "200px"; ele.style.left = "200px"; console.log("left=" + ele.style.left); } function move() { var ele = document.getElementById("message"); console.log("move=" + ele); ele.style.left = "100px"; console.log("left=" + ele.style.left); } move(); 控制台： [Web浏览器] "move=null" /位置动画相关/position.js (11) [Web浏览器] "Uncaught TypeError: Cannot read property 'style' of null" /位置动画相关/position.js (12) [Web浏览器] "window onload=[object HTMLParagraphElement]" /位置动画相关/position.js (3) [Web浏览器] "left=200px" /位置动画相关/position.js (7)为什么在window.onload 之外那次 取message的对象返回的是NULL？我试了一下，如果都放到window.onload 里面，就可以执行。为什么不能放外面？

Answer 1

虽然我没有看到你的HTML代码，但是我已看穿了一切！

你仔细看一下你的html代码，问题就在你引入js文件的那一句话，我100%肯定，你这一句话是写在 div id=“message”之前！这个是不行的。

html代码有执行的顺序，一般情况下是按照文档从上到下的顺序，也就是说，div id=“message”还没加载，你的document.getElementById("message")就开始运行了，所以才找不到这个元素。而window.load这个函数很特别，它是在整个文档加载完之后再执行里面的js代码，所以放在window.load里面可以执行。

解决方法和简单，把引入js的文件的那一段写在靠后的位置，其实，js的引入本来就是要写在文档靠后的位置，这可以说是一个常识，我一般写在</body>前面。

打字这么多，给个采纳吧 ~ ~解决一个问题的同时，要养成良好的编码习惯，js的引入放在文档后面，切记！