使用DOM获取input元素值报错：Cannot read property 'value' of null

这个问题我太熟悉了——本质是DOM加载顺序的问题，咱们一步步来拆解和解决：

问题原因 #

浏览器是从上到下解析HTML文档的，你的JS脚本放在了<head>标签里，当浏览器执行这段脚本时，<body>里的<input id="one">元素还没被渲染到DOM树中，所以document.getElementById("one")返回的是null，自然就会抛出"Cannot read property 'value' of null"的错误。

三种可行的解决方案 #

方案1：把脚本移到<body>末尾（最简单直接）

将JS代码放在目标DOM元素的后面，确保执行脚本时元素已经存在：

<!doctype html>
<html>
<head>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a); // 现在能正常输出"iss"了
</script>
</body>
</html>

方案2：监听DOMContentLoaded事件（推荐）

使用DOMContentLoaded事件，它会在DOM完全解析完成后立即触发（不需要等待图片、样式表等外部资源加载），不管脚本放在哪里都能安全获取元素：

<!doctype html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var a=document.getElementById("one").value;
  console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>

方案3：使用window.onload（兼容老浏览器）

如果需要兼容非常老旧的浏览器，可以用window.onload，不过它会等待所有页面资源（图片、样式等）加载完成后才触发，时机稍晚：

<!doctype html>
<html>
<head>
<script>
window.onload = function() {
  var a=document.getElementById("one").value;
  console.log(a);
};
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>

总结 #

日常开发中最推荐方案1或方案2，前者简单直观，后者更灵活（适合脚本必须放在<head>里的场景）。

内容的提问来源于stack exchange，提问作者user9228388