getElementsByTagName で aタグの href を取得したい

ページ内のリンクを動的に変更させるために、hrefを取得しようとしています
しかし、下記のようなコードを書いたのですが、上手く動作しません（取得できません）

javascript
1let res = document.getElementsByTagName('a');
2for (let value of res) {
3    console.log(value);
4    let href = value.getAttribute('href');
5    console.log(href);
6}

value の値には aタグの内容は取得できています
さまざまなサイトで、その後に getAttribute を使う紹介がされているのですが、すべて null となります

for of が原因なのかと思い、res[0].getAttribute('href') にしても null になります

value.getAttributeNames() res[0].getAttributeNames() にすると href は存在します

なぜ、hrefを取得することができないのでしょうか？
集積すべきところはどこでしょうか？

htmlはこちらを使っています
よろしくお願いします

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="replace_a_href.js"></script>
6</head>
7<body>
8<a herf="https://example.com">テストリンク</a><br>
9<a herf="https://example.com?q=">テストリンク</a><br>
10<a herf="https://example.com?q=hohoho">テストリンク</a><br>
11<a herf="https://example.com?q=hohoho&">テストリンク</a><br>
12<a herf="https://example.com?q=hohoho&hohoho">テストリンク</a><br>
13<a herf="https://example.com?q=hohoho&a=120&b=1">テストリンク</a>
14</body>
15</html>