UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#158 idに指定の文字列を含むHTML要素を取得する方法

記入日:2023-06-15 編集日:2023-06-15

idに指定の文字列を含むHTML要素を取得する方法を解説してみようと思います。

この記事を読むと(約5分)
idに指定の文字列を含むHTML要素を取得する方法をイメージできます。

idに指定の文字列を含むHTML要素を取得

以下は、指定されたセレクタに一致するHTML要素を取得するために使用されるJavaScriptです。

javascript
const quantityLabels = document.querySelectorAll("span[id^='quantityA']");

このコードでは、querySelectorAllメソッドを使用して、セレクタ "span[id^='quantityA']" に一致する全ての要素を取得しています。
このセレクタは、id属性の値が "quantityA" で始まる 要素を選択します。


例えば、以下のようなHTMLがある場合に、このコードを使用すると一致する要素が取得されます。

<span id="quantityA1">1</span>
<span id="quantityA2">2</span>
<span id="quantityB1">3</span>
<span id="quantityA3">4</span>

この場合、quantityLabelsは NodeList オブジェクトになります。NodeList は、
HTML要素のコレクションを表すオブジェクトであり、要素の一覧を反復処理することができます。

例えば、以下のように quantityLabels を使用して取得した要素にアクセスすることができます。

quantityLabels.forEach(label => {
  console.log(label.textContent);
});

この例では、quantityLabels の各要素の textContent プロパティをコンソールに出力しています。
これにより、上記のHTML例で取得された要素のテキストコンテンツ(1、2、4)が表示されます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。