この記事では、JavaScript でリスト項目内のアンカー要素の ID を取得する手順を説明します。
JavaScriptでリスト項目内のアンカーのIDを取得するにはどうすればよいですか?
要素の ID 属性は、JavaScript 関数でその要素を操作および使用するために使用できる一意の識別子です。ユーザーは、さまざまな方法で ID を使用して要素を取得できます。ただし、HTML 要素の ID を取得するのは難しい場合があります。ただし、HTML 要素の ID 属性を取得するのは少し複雑な場合があります。
同様に、「」内のアンカー要素の場合も、 リストアイテム 」の場合、リスト内に複数のアンカー要素が存在するため、ユーザーはアンカー要素を直接呼び出してその ID を取得することはできません。この状況に対して、以下に示すデモは、リスト項目内のアンカー要素の ID を取得する方法を示しています。
< html >
< 体 >
< ディビジョン >
< ウル ID = 'リスト' >
< それ >
< ある ID = 「アンカー1」 href = 「#」 > アンカー要素 1 < / ある >
< / それ >
< それ >
< ある ID = 「アンカー2」 href = 「#」 > アンカー要素 2 < / ある >
< / それ >
< それ >
< ある ID = 「アンカー3」 href = 「#」 > アンカー要素 3 < / ある >
< / それ >
< / ウル >
< / ディビジョン >
< p > 上のリストからアンカー要素の ID を取得するには、下のボタンをクリックしてください。 < / p >
< ボタン クリック時 = 「myFunction()」 > IDを取得する < / ボタン >
< p ID = '根' >< / p >
< 脚本 >
関数 myFunction() {
let listItems = document.querySelectorAll('#list a[id]');
for (i = 0 とする; i < listItems.length; i++ ) {
させて ID = リストアイテム [ 私 】 。 ID ;
document.getElementById ( '根' ) .innerHTML + =
「アンカー要素のID」 + ( 私 + 1 ) + ' は： ' + ID + '
';
}
}
< / 脚本 >
< / 体 >
< / html >
上記のコードの説明は次のとおりです。
- ID「」を持つ順序なしリスト リスト ” が作成され、” に含まれます。 』タグ。
- リスト項目内に 3 つのアンカー タグが作成され、ID が与えられます。 アンカー1 '、' アンカー2 '、 そして ' アンカー3 ' それぞれ。
- 次に、「 ” 要素が作成され、テキスト コンテンツが含まれます。
- 次に、「」を使用してボタン要素を作成します。 <ボタン> 』タグ。 ” onclick() ボタンの「属性」には「」という機能が用意されています。 myFunction() ”。
- 空っぽ ' ” ID を持つ要素” のために ' 創造された。
- 次に、「」の内部 <スクリプト> ” タグ、” という名前の関数 myFunction() ' 創造された。
- 関数内では、「」という名前の定数 リストアイテム ' 創造された。
- この定数には、「」を使用してすべてのアンカー要素の ID が提供されます。 document.querySelectorAll() ' 方法。このメソッドにはリストの ID と「」というクエリが提供されます。 援助] ”。
- すると、「 のために ” ループは、” をループするように作成されます。 リストアイテム ' 絶え間ない。
- アンカー要素の ID が「」の代わりに出力されます。 p ” ID を持つ要素” のために ”。これは「」を使用して行われます。 document.getElementById().innerHTML ' 方法。
出力：
以下の出力では、アンカー要素がリスト内に存在し、ユーザーは「」をクリックすることで ID を取得できます。 IDを取得する ' ボタン。
リスト項目内のアンカー要素の ID を取得する方法は以上です。
結論
リスト項目内のアンカー要素の ID を取得するには、組み込み JavaScript「 document.querySelectorAll() 」という方法が使えます。さらに、これらのアンカー要素の取得された ID は、組み込みの JavaScript を使用して Web ページに印刷できます。 .innerHTML() ' 方法。この記事では、JavaScript でリスト項目内のアンカー要素の ID を取得する手順を説明しました。