web-dev-qa-db-ja.com

テキストノードとは何ですか？ //document.createTextNode（）

そのため、通常のjQueryコードの多くをネイティブjavascriptでゆっくりと置き換えており、document.createTextNode()および 関連するMDNドキュメント に遭遇しました。読んだ後、テキストノードとは少し混乱しています。

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

誰もがテキストノードが何であり、それが何のために使用されているかについてもう少し定義を提供できますか？このような基本的なもの以外の実用的な用途はありますか？

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

ページ内のすべての表示可能な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プロパティを使用して、この問題も解決できます。

59
jfriend00