61

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

の中にテキストを入れるために使用できることは理解していますがdiv、「要素の中に単語を入れるために使用する」だけではありません。 これを見ると、テキストノードは属性のテキストも参照できるようです。

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

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

2 に答える 2

80

ページ内の表示可能なすべての 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

于 2013-06-19T16:13:00.047 に答える