jQuery 选择器和JS getElementById 二者返回值的一点区别

今天学习AJAX的过程中，有两段示例代码，其中一段如下（另一段类似）：

<div id="navigation">
               <a id="beginners" title="beginners" href="#">Beginners</a>
               <a id="intermediate" title="intermediate" href="#">Intermediate</a>
               <a id="advanced" title="advanced" href="#">Advanced</a>
          </div>

两段代码均做类似处理：

 var buttons = document.getElementById("navigation").getElementsByTagName("a");
    for (const i in buttons) {
        var currentBtn = buttons[i];
        currentBtn.onclick = showTab;
        currentBtn.onmouseover = buttonOver;
        currentBtn.onmouseout = buttonOut;
    }