Javascript getElementById无法访问加载的DOM

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>

---

除了

getElementsByClassName

之外，还有一个返回null，我有什么地方出错吗？

您必须在HTML文档后面包含JavaScript，如下所示。如果您使用的是JavaScript文件，那么您也必须在HTML文档之后包含该文件

城市：

要点：

好啊
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'）；
log（document.getElementById（'aqi-city-input'）；
console.log（CityName）；
console.log（CityMore）；
控制台日志（质量）；
控制台日志（按钮）；

将javascript代码移到HTML下方。
或在页面加载完成后执行。
在JQuery中，您可以执行以下操作：

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

$（文档）.ready（函数（）{
//…你的代码//
});

查看此console.log（CityName.textContent）//null console.log（CityMore.textContent）//html对象console.log（Quality.textContent）//null console.log（Button.textContent）

GetElementsByCassName

扫描整个文档，可能还有其他元素使用这个类名，它是在JavaScript之前加载的，请尝试更改从

GetElementsByCassName

获取的元素的样式，以确保获取的元素正确。我已经包含了js文件，为什么GetElementsByCassName是工作的，但是getElementById是不工作的，我知道你的意思，但是，在我的例子中，HTML是在JS之前呈现的

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