【TypeScript】取得したHTMLのhref属性の型指定が分からない

Question

前提・実現したいこと

TypeScript初心者です。document.querySelectorAll()で取得したGoogle検索結果のElementからmap関数でhrefを順番に取り出したいです。
すでにJavaScriptで動作を確認したものをTypeScriptへ置き換えています。

発生している問題・エラーメッセージ

// Googleの検索結果ページから [aタグ,aタグ,aタグ...] を取得
const google: HTMLInputElement[] = Array.from(document.querySelectorAll("#rso > div > div > div.r > a:nth-child(1)"));
// item.href の href でエラーメッセージ
const googleURLs: string[] = google.map( (item) => item.href );

エラーメッセージ
Property 'href' does not exist on type 'HTMLInputElement'.

エラーの原因は文字通り、HTMLInputElementの中にhrefの型はありません。というところにあります。
しかし 型 HTMLInputElement[] へ新たに interface か何かで href属性 で定義する方法を調べてもわかりませんでした。
HTMLInputElement[]を継承しつつ href属性 を型定義できるのでしょうか。それとも別のやり方があるのでしょうか。

エラーメッセージやいくつかのキーワードで調べてみても適切な解決法を見つけられなかったためにご質問させていただきました。

Comments

[maisumakun]

抽出したいHTMLは<input href="" />のような属性が指定してある、ということで間違いないのですか？

[moimoi_sushi]

はい、<a href="URL"></a>の属性になっています。

説明足らずですみません。ソースを拾ってきました。
以下は const google: HTMLInputElement[] = 以下略 で拾ってきているGoogle検索結果ページのaタグの１つです。

<a href="https://qiita.com/pooshikin/items/5aedc1a1d214f2f2e345" ping="/url?sa=t&amp;source=web&amp;rct=j&amp;url=https://qiita.com/pooshikin/items/5aedc1a1d214f2f2e345&amp;ved=2ahUKEwj274jezufpAhVs6nMBHSIqAlk4ChAWMAN6BAgBEAE"><br><h3 class="LC20lb DKV0Md">TypeScript Sampleをやってみるその11 - Qiita</h3><div class="TbwUpd NJjxre"><cite class="iUh30 bc tjvcx">qiita.com<span class="eipWBe"> › HTML</span></cite></div></a>

上記を配列で取得しhref属性を抽出しようとしています。

Answer 1

それとも別のやり方があるのでしょうか。

<input href="" />のように勝手な属性を書き足した場合、DOMの段階でプロパティとしては取得できません。getAttributeを使ってアトリビュートとしての取得は可能です。

const googleURLs: string[] = google.map( (item) => item.getAttribute('href') );

Comments

[maisumakun]

<a>を取得するのであれば、型はHTMLInputElementではなくHTMLAnchorElementが適切です。こちらにはhrefプロパティがあります。

[moimoi_sushi]

ありがとうございます。できました。Anchor用にあったのですね。他のプロパティを適当に当てはめてはいたのですがAnchorの存在は見過ごしておりました。