クロスブラウザーで HTML 要素からテキスト ノード コンテンツのみを取得する方法

クロスブラウザーでの要素のテキスト ノードの取得

HTML では、要素にテキストとテキストの両方が含まれる場合、要素のテキスト コンテンツを取得するのが困難になることがあります。他の要素。テキスト ノードを効果的に抽出するには、クロスブラウザ ソリューションが必要です。

問題:

次の HTML 構造を考えてみましょう:

<div class="title">
   I am text node
   <a class="edit">Edit</a>
</div>

目標は、「編集」アンカーを保持しながら、テキスト ノード「I am text node」を取得することです。 tag.

解決策:

これは、jQuery フレームワークを使用して実現できます:

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

このコード:

1. 「title」クラスの要素を選択します。
2. を使用してその内容を取得します。 content() メソッド。
3. filter() メソッドを使用してコンテンツをフィルタリングし、テキスト ノード (nodeType == Node.TEXT_NODE) のみを保持します。
4. 次を使用してフィルタリングされたノードのテキスト コンテンツを取得します。 text() メソッド。

その結果、変数 text には目的のテキスト ノード「I」のみが含まれます。テキストノードです。"

以上がクロスブラウザーで HTML 要素からテキスト ノード コンテンツのみを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。