☰

テキストノードとは何か、その用途は? //document.createTextNode() 質問する

tag-icon • tag-icon javascript html textnode
テキストノードとは何か、その用途は? //document.createTextNode() 質問する

そこで、私はゆっくりと通常のjQueryコードの多くをネイティブJavaScriptに置き換えてきましたがdocument.createTextNode()、関連するMDNドキュメント読んだ後、テキストノードが何なのか少し混乱しました。

's内にテキストを配置するために使用できることは理解していますdivが、単に「要素内に単語を配置するために使用する」以上のことがもう少しあるはずです。これを見ると、テキスト ノードは属性のテキストも参照できるようです。

テキスト ノードとは何か、そしてそれが何に使用されるのかをもう少し詳しく説明してくれる人はいますか? このような基本的な用途以外に、テキスト ノードの実用的な用途はありますか?

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

ベストアンサー1

ページ内の表示可能なすべての HTML テキスト (フォーム要素またはカスタム埋め込みオブジェクトのテキストを除く) は、テキスト ノード内にあります。ページは、さまざまな種類のノードで構成されています (さまざまなノードの種類の一覧は、次の場所を参照してください。https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType) には、子ノードを持つことができるものと、持つことができないものがあります。たとえば、div は子ノードを持つことができる ELEMENT ノードです。これらの子ノードは、他の ELEMENT ノードである場合もあれば、TEXT ノード、COMMENT ノード、またはその他のタイプのノードである場合もあります。

要素ノードのプロパティを設定すると.innerHTML、適切なノードが作成され、innerHTML プロパティを設定した要素の子ノードになります。設定した要素にテキストがある場合はinnerHTML、テキストを保持するためのテキスト ノードが作成されます。

DOCUMENT_NODE、ELEMENT_NODEおよびはTEXT_NODE最も一般的なノード タイプであり、テキストがあるすべてのページに存在します。

コード例では次のようになります:

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

これにより、テキスト ノードが 1 つ作成され、作成した div に配置されます。次のものと同じ DOM 構造が生成されます。

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

後者の場合、システムによってテキスト ノードが作成されます。

単純な JavaScript プログラミングでは (jQuery は 型ではないノードから開発者を保護する傾向がありますELEMENT_NODE)、テキストを含む要素の子ノードを調べるたびにテキスト ノードに遭遇します。.nodeType各子の をチェックして、それが別の要素なのか、テキスト ノードなのか、あるいは他の型のノードなのかを知る必要があります。

一般的に、より高レベルのプロパティをより簡単に使用できることが多いため、テキスト ノードを直接操作する理由はあまりありません.innerHTML。ただし、参考までに、テキスト ノードを直接操作する理由をいくつか示します。

  1. 周囲の要素に影響を与えずにテキストを変更したい場合、.innerHTML影響を受ける要素に対して新しい要素がすべて作成され、それらに設定されている可能性のあるイベント ハンドラーがすべて強制終了されますが、.nodeValueテキスト ノードに を設定しても要素は再作成されません。

  2. 結果の HTML マークアップなしでドキュメント内のテキストだけを検索し、各テキストが DOM 階層内のどこにあるかを正確に知りたい場合は、すべてのテキスト ノードを検索できます。たとえば、ドキュメントのテキスト検索を実行して、見つかったテキストを強調表示する場合は、おそらくテキスト ノードを直接検索することになります。

  3. を使用するとブラウザが解析して解釈する他のマークアップが含まれる可能性があるというセキュリティ上のリスクなしに、テキストを表示したいとします.innerHTML。そのため、テキスト ノードを作成し、そのテキストの値を設定すると、ブラウザはその中の HTML を解釈しません。最新のブラウザでは、.textContentの代わりに要素の プロパティを使用して.innerHTMLこの問題を解決することもできます。

おすすめ記事