DOM要素について（取得の仕方による違い）

html
1<html>
2    <body>
3    <input type="button" value="botton" id="button">
4    <p></p>
5    </body>
6    <script src="script.js"></script>
7</html>

javascript
1let button = document.getElementById("button");
2let p = document.getElementsByTagName("p");
3let botton_2 = document.getElementsByTagName("input");
4console.log(p);
5console.log(button);
6console.log(button.value);
7console.log(botton_2);

DOM要素をjavascript側で取得するのには様々な方法があります。
ここではgetElementById()メソッドと、getElementByTagName()メソッドを考えます。
この２つで取得したときの様子がjavascript側では全く異なります。
つまり、上のコードにおけるinput要素を、前者で取得した際、コンソールにおける表示を見てみると、htmlタグが表示されるだけです。
<input type="button" value="botton" id="button">
ところが、後者で取得すると、HTML Collection　[input#button, button: input#button]と表示され、プロパティがずらずらっと表示されます。
後者の方が、より、javascriptオブジェクトとして取得できている感じがします。
この２つの取得の仕方の違いについて何かご存知の方はいらっしゃいますか？？

行動規範の内容に同意します

回答3件

前提が違います
botton_2はHTMLCollectionですから要素の集合体です
実際にHTML要素を参照するときにはbutton_2[0]を利用します
つまりbotton_2[0]==buttonです

ちなみにDOMの掴み方はHTMLCollectionとNodeListがあり
前者は参照時点の集合、後者は関数を呼び出した時点の集合となります

javascript
1<div>1</div>
2<script>
3const d1=document.getElementsByTagName('div');
4const d2=document.querySelectorAll('div');
5</script>
6<div>2</div>
7<script>
8console.dir(d1);
9console.dir(d2);
10</script>