getElementById无法访问加载的DOM

Question

<div>
    <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
    <label>Point：<input id="aqi-value-input" type="text"></label><br>
    <button id="add-btn">OK</button>
</div>

JavaScript

var CityName = document.getElementById('aqi-city-input'); 
var CityMore = document.getElementsByClassName('122');    
var Quality = document.getElementById('aqi-value-input'); 
var Button = document.getElementById('add-btn');

console.log(document.getElementById('aqi-city-input'));  //null
console.log(CityName);                                   //null
console.log(CityMore);                                   //html object
console.log(Quality);                                    //null
console.log(Button);                                     //null

除了getElementsByClassName之外，返回null，我有什么问题吗？

Answer 1

您必须将JavaScript包含在HTML文档之后，如下所示。如果您使用的是一个JavaScript文件，您也必须在HTML之后包含这个文件。

​

<div>
  <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
  <label>Point：<input id="aqi-value-input" type="text"></label><br>
  <button id="add-btn">OK</button>
</div>
<script src="path/to/your/script.js"></script>
<script>
  var CityName = document.getElementById('aqi-city-input'); 
  var CityMore = document.getElementsByClassName('122');    
  var Quality = document.getElementById('aqi-value-input'); 
  var Button = document.getElementById('add-btn');

  console.log(document.getElementById('aqi-city-input')); 
  console.log(CityName);                               
  console.log(CityMore);                                 
  console.log(Quality);                           
  console.log(Button);    
</script>

​

您也可以在HTML文档之前使用JavaScript，但在这种情况下，您必须将代码包装在事件侦听器DOMContentLoaded中，这样，如果加载了HTML，JavaScript就会执行(而JavaScript可以看到HTML元素)。

如果是JavaScript文件，您应该将代码包装到事件侦听器中。

​

<script src="path/to/your/script.js"></script> <!-- content is wrapped in event listener -->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var CityName = document.getElementById('aqi-city-input'); 
    var CityMore = document.getElementsByClassName('122');    
    var Quality = document.getElementById('aqi-value-input'); 
    var Button = document.getElementById('add-btn');

    console.log(document.getElementById('aqi-city-input')); 
    console.log(CityName);                               
    console.log(CityMore);                                 
    console.log(Quality);                           
    console.log(Button);    
  });
</script>
<div>
  <label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
  <label>Point：<input id="aqi-value-input" type="text"></label><br>
  <button id="add-btn">OK</button>
</div>

​

Answer 2

将javascript代码移动到HTML下面。

或者在页面加载完成后执行它。

在JQuery中，您可以如下所示：

<script>
    $(document).ready(function() {
        //... your code ...//
    });
</script>