JavaScriptのネイティブメソッドで要素を選択する方法

2024-04-10

jQueryでテキストコンテンツで要素を見つける方法

contains() セレクターは、テキストノードの内容が指定された文字列を含む要素を選択します。

<div>
  <h1>これはタイトルです</h1>
  <p>本文です</p>
</div>

// "タイトル"を含む要素を見つける
$( "h1:contains('タイトル')" ).css( "color", "red" );

// "本文"を含む要素を見つける
$( "p:contains('本文')" ).css( "font-weight", "bold" );

text() セレクターは、要素のテキストコンテンツと一致する要素を選択します。

<div>
  <h1>これはタイトルです</h1>
  <p>本文です</p>
</div>

// テキスト内容が "これはタイトルです" と一致する要素を見つける
$( "h1:text('これはタイトルです')" ).css( "color", "red" );

// テキスト内容が "本文です" と一致する要素を見つける
$( "p:text('本文です')" ).css( "font-weight", "bold" );

filter() メソッドは、指定された条件に一致する要素をフィルタリングするために使用できます。

<div>
  <h1>これはタイトルです</h1>
  <h2>これはサブタイトルです</h2>
  <p>本文です</p>
</div>

// テキスト内容が "タイトル" または "サブタイトル" を含む要素を見つける
$( "h1, h2" ).filter(function() {
  return $(this).text().indexOf("タイトル") !== -1;
}).css( "color", "red" );

find() メソッドは、子孫要素を検索するために使用できます。

<div>
  <h1>これはタイトルです</h1>
  <p>本文です</p>
  <span>これは補足です</span>
</div>

// "タイトル"を含む要素の子孫要素を見つける
$( "h1:contains('タイトル')" ).find( "span" ).css( "font-style", "italic" );

<div>
  <h1>これはタイトルです</h1>
  <h2>これはサブタイトルです</h2>
  <p>本文です</p>
</div>

// "タイトル" を含まない要素を見つける
$( "h1, h2" ).not( ":contains('タイトル')" ).css( "color", "gray" );

これらのセレクターとメソッドを組み合わせて、さまざまな条件に基づいて要素を見つけることができます。

HTML

<div>
  <h1>これはタイトルです</h1>
  <h2>これはサブタイトルです</h2>
  <p>本文です</p>
  <span>これは補足です</span>
</div>

JavaScript

// "タイトル"を含む要素を赤色にする
$( "h1:contains('タイトル')" ).css( "color", "red" );

// テキスト内容が "サブタイトル" と一致する要素を太字にする
$( "h2:text('これはサブタイトルです')" ).css( "font-weight", "bold" );

// "タイトル" または "サブタイトル" を含む要素の子孫要素を見つける
$( "h1, h2" ).filter(function() {
  return $(this).text().indexOf("タイトル") !== -1;
}).find( "span" ).css( "font-style", "italic" );

// "タイトル" を含まない要素を灰色にする
$( "h1, h2" ).not( ":contains('タイトル')" ).css( "color", "gray" );

このコードを実行すると、以下のようになります。

"これはタイトルです" というテキストを含む <h1> 要素が赤色になります。
テキスト内容が "これはサブタイトルです" と一致する <h2> 要素が太字になります。
"タイトル" または "サブタイトル" を含む要素の子孫要素である <span> 要素が斜体になります。
"タイトル" を含まない <h1> および <h2> 要素が灰色になります。

特定のクラスを持つ要素内のテキストコンテンツに基づいて要素を見つける
テキストコンテンツが部分一致する要素を見つける

これらの例は、jQueryを使用してテキストコンテンツに基づいて要素を見つける方法を理解するのに役立ちます。

テキストコンテンツに基づいて要素を見つける他の方法

JavaScriptのネイティブメソッド

JavaScriptには、querySelector() や querySelectorAll() などのメソッドがあり、要素を選択するために使用できます。

<div>
  <h1>これはタイトルです</h1>
  <h2>これはサブタイトルです</h2>
  <p>本文です</p>
</div>

// "タイトル"を含む要素を見つける
const titleElement = document.querySelector( "h1:contains('タイトル')" );

// テキスト内容が "サブタイトル" と一致する要素を見つける
const subtitleElement = document.querySelector( "h2:text('これはサブタイトルです')" );

// "タイトル" または "サブタイトル" を含む要素を見つける
const elements = document.querySelectorAll( "h1, h2" ).filter(element => element.textContent.indexOf("タイトル") !== -1);

// "タイトル" を含まない要素を見つける
const notTitleElements = document.querySelectorAll( "h1, h2" ).filter(element => element.textContent.indexOf("タイトル") === -1);