TextノードとDocumentFragmentノード
Textノードの概念
テキスト ノード (Text) は、要素ノード (Element) と属性ノード (Attribute) のテキスト コンテンツを表します。ノードにテキストの一部のみが含まれている場合、そのノードには、ノードのテキスト コンテンツを表すテキスト子ノードがあります。
通常、親ノードの「firstChild」、「nextSibling」、およびその他の属性を使用してテキスト ノードを取得するか、「Document」ノードの「createTextNode」メソッドを使用してテキスト ノードを作成します。
// テキストノードを取得
var textNode = document.querySelector('p').firstChild;
//テキストノードを作成
var textNode = document.createTextNode('Hi');
document.querySelector('div').appendChild(textNode);
ブラウザはネイティブに「Text」コンストラクターを提供します。テキスト ノード インスタンスを返します。そのパラメータはテキスト ノードのテキスト コンテンツです。
// 空の文字列
var text1 = 新しいテキスト();
// 空ではない文字列
var text2 = new Text('これはテキスト ノードです');
スペースも文字であるため、単一のスペースでもテキスト ノードが形成されることに注意してください。たとえば、<p> </p> にはスペースが含まれており、その子ノードはテキスト ノードです。
Node インターフェースの継承に加えて、テキスト ノードは CharacterData インターフェースも継承します。 Node インターフェースのプロパティとメソッドについては、「Node インターフェース」の章を参照してください。以下のプロパティとメソッドのほとんどは、CharacterData インターフェースからのものです。
テキストノードの属性
データ
data 属性は nodeValue 属性と同等であり、テキスト ノードのコンテンツを設定または読み取るために使用されます。
// テキストコンテンツを読み取る
document.querySelector('p').firstChild.data
// と同等
document.querySelector('p').firstChild.nodeValue
//テキスト内容を設定する
document.querySelector('p').firstChild.data = 'Hello World';
全文
wholeText プロパティは、現在のテキスト ノードと隣接するテキスト ノードを全体として返します。ほとんどの場合、wholeText プロパティの戻り値は、data プロパティおよび textContent プロパティと同じです。ただし、特殊な場合は異なります。
たとえば、HTML コードは次のようになります。
<p id="para">A <em>B</em> C</p>
このとき、テキストノードのwholeText属性とdata属性は同じ戻り値になります。
var el = document.getElementById('para');
el.firstChild.wholeText // "A "
el.firstChild.data // "A "
ただし、<em> ノードが削除されると、wholeText 属性と data 属性は異なります。この時点では、<p> ノードには実際には 2 つの隣接するテキスト ノードが含まれているためです。
el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "
長さ
length プロパティは、現在のテキスト ノードのテキストの長さを返します。
(new Text('Hello')).length // 5
nextElementSibling、previousElementSibling
nextElementSibling プロパティは、現在のテキスト ノードの直後にある兄弟要素ノードを返します。要素ノードが取得できない場合はnullを返す。
// HTML は
// <div>こんにちは<em>世界</em></div>
var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// <em>ワールド</em>
previousElementSibling プロパティは、現在のテキスト ノードの前に最も近い兄弟要素ノードを返します。要素ノードが取得できない場合は、null:を返します。
テキストノードのメソッド
appendData()、deleteData()、insertData()、replaceData()、subStringData()
以下の 5 つのメソッドは、いずれも Text ノードのテキスト内容を編集するためのメソッドです。
appendData():Textノードの末尾に文字列を追加します。deleteData():Textノード内の部分文字列を削除します。最初のパラメータは部分文字列の開始位置、2 番目のパラメータは部分文字列の長さです。insertData():Textノードに文字列を挿入します。最初のパラメータは挿入位置、2 番目のパラメータは挿入された部分文字列です。replaceData(): テキストの置換に使用されます。最初のパラメータは置換開始位置、2 番目のパラメータは置換される長さ、3 番目のパラメータは新しく追加された文字列です。subStringData(): 部分文字列を取得するために使用されます。最初のパラメータはTextノード内の部分文字列の開始位置で、2 番目のパラメータは部分文字列の長さです。
// HTMLコードは
// <p>ハローワールド</p>
var pElementText = document.querySelector('p').firstChild;
pElementText.appendData('!');
// ページには Hello World! が表示されます。
pElementText.deleteData(7, 5);
//ページには「Hello W」と表示されます
pElementText.insertData(7, 'こんにちは ');
// ページには Hello WHello が表示されます
pElementText.replaceData(7, 5, 'ワールド');
// ページには Hello WWorld が表示されます
pElementText.substringData(7, 10);
// ページ表示はそのままで「World」に戻ります
取り除く（）
remove メソッドは、現在の Text ノードを削除するために使用されます。
// HTMLコードは
// <p>ハローワールド</p>
document.querySelector('p').firstChild.remove()
// これで HTML コードは次のようになります
// <p></p>
分割テキスト()
splitText メソッドは、Text ノードを 2 つの隣接する Text ノードに分割します。そのパラメータは分割位置 (ゼロから開始) であり、分割はこの位置の文字の前で終了します。分割位置が存在しない場合はエラーが報告されます。
分割後、このメソッドは分割位置以降の文字列を返し、元の Text ノードは分割位置より前の文字列のみになります。
// HTML コードは <p id="p">foobar</p> です
var p = document.getElementById('p');
var textnode = p.firstChild;
var newText = textnode.splitText(3);
newText // "バー"
テキストノード // "foo"
親要素ノードの normalize メソッドは、隣接する 2 つの Text ノードをマージできます。
上記の例の続きで、テキスト ノードの splitText メソッドは Text ノードを 2 つに分割し、親要素の normalize メソッドはその逆の操作を実行してそれらを結合することができます。
p.childNodes.length // 2
// 隣接する 2 つの Text ノードをマージします
p.normalize();
p.childNodes.length // 1
DocumentFragment ノード
DocumentFragment ノードはドキュメント フラグメントを表し、それ自体が完全な DOM ツリー構造です。親ノードはなく、「parentNode」は「null」を返しますが、任意の数の子ノードを挿入できます。これは現在のドキュメントに属していないため、「DocumentFragment」ノードを操作する方が、DOM ツリーを直接操作するよりもはるかに高速です。
これは通常、DOM 構造を構築し、それを現在のドキュメントに挿入するために使用されます。 document.createDocumentFragment メソッドとブラウザのネイティブ DocumentFragment コンストラクターは、空の DocumentFragment ノードを作成できます。次に、他の DOM メソッドを使用して子ノードを追加します。
var docFrag = document.createDocumentFragment();
// と同等
var docFrag = 新しいDocumentFragment();
var li = document.createElement('li');
li.textContent = 'Hello World';
docFrag.appendChild(li);
document.querySelector('ul').appendChild(docFrag);
上記のコードは、DocumentFragment ノードを作成し、次にそれに li ノードを追加し、最後に DocumentFragment ノードを元のドキュメントに移動します。
DocumentFragment ノード自体は現在のドキュメントに挿入できないことに注意してください。これが appendChild()、insertBefore()、replaceChild() などのメソッドのパラメータとして使用される場合、そのすべての子ノードは、それ自体ではなく現在のドキュメントに挿入されます。 DocumentFragment ノードが現在のドキュメントに追加されると、それ自体は空のノードになり (textContent 属性は空の文字列)、再度使用できるようになります。 DocumentFragment ノードの内容を保存したい場合は、cloneNode メソッドを使用できます。
書類
.querySelector('ul')
.appendChild(docFrag.cloneNode(true));
上記のように DocumentFragment ノードを現在のドキュメントに追加しても、DocumentFragment ノードはクリアされません。
以下は、DocumentFragment を使用して、指定したノードのすべての子ノードの順序を逆にする例です。
関数リバース(n) {
var f = document.createDocumentFragment();
while(n.lastChild) f.appendChild(n.lastChild);
n.appendChild(f);
}
DocumentFragment ノード オブジェクトには独自のプロパティとメソッドはなく、すべて Node ノードと ParentNode インターフェイスから継承します。つまり、DocumentFragment ノードは、Node ノードに比べて、次の 4 つの属性を追加します。
children: 現在のDocumentFragmentオブジェクトのすべての子要素ノードを含む、動的HTMLCollectionコレクション オブジェクトを返します。firstElementChild: 現在のDocumentFragmentオブジェクトの最初の子要素ノードを返すか、存在しない場合はnullを返します。lastElementChild: 現在のDocumentFragmentオブジェクトの最後の子要素ノードを返します。存在しない場合はnullを返します。childElementCount: 現在のDocumentFragmentオブジェクトのすべての子要素の数を返します。
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0