JS代码中document.getElementByID遇到的奇怪现象，标签用了个id名（btn）与什么东西有关联？

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

问题：我在网页导航栏上放了一个按钮，通过点击事件控制特定元素的显示与隐藏，下面是html代码：

<script type='text/javascript' src='Root.js'></script>
……
<span><input id='btn' type='button' value='隐藏' onclick="displayer('PSPP')"></span>

外部JS文件内容：

function displayer(Clsname){
      var Sy=document.getElementsByClassName(Clsname);
      //var btn=document.getElementByID("btn");
      alert(btn.value);
      if (btn.value=="隐藏") {
           btn.value="显示";
           for(var i=0;i<Sy.length;i++){Sy[i].style.display="none";}
      }else{
           btn.value="隐藏";
           for(var i=0;i<Sy.length;i++){Sy[i].style.display="";}//block
      }
}

以上代码运行后能达到我要的效果！我奇怪的是，必须要注释掉function()中第三行代码才运行正确！哪位达人能解答下，btn是在什么时候被赋值了的？经过不断尝试，我发觉与id名btn有关，换了id名后就不起作用了！

如果你是使用id选择器，也是可以不用document.getElementById()这个函数去取值的。
浏览器自动把这个赋了id的标签给映射在全局变量里面了，如图所示

document.getElementById()