getElementsByClassName为什么取不到对象？

getElementsByClassName为啥拿不到的对象呢？请看下面代码，看看你有没有瞬间就发现问题在哪？

<script>
  function open(){
    var alert = document.getElementsByClassName('alert_container')[0];
    console.log(alert);
    
  }
</script>

<input type="button" value="显示警告框" @click="open()">
<div class="alert_container">
  <div class="iconfont icon-tishi">警告哦，这是一条警告消息框</div>
</div>

其实，这就是js的位置出现了问题，相应的DOM对象加载完毕之前，对应的对象是不能获取到的。
解决方法：
更改一下js的位置，让他放在body的最下面

<input type="button" value="显示警告框" @click="open()">
<div class="alert_container">
  <div class="iconfont icon-tishi">警告哦，这是一条警告消息框</div>
</div>
<script>
  function open(){
    var alert = document.getElementsByClassName('alert_container')[0];
    console.log(alert);
    
  }
</script>