关于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的引入放在文档后面，切记！