KnowHub

ParentNodeインターフェース、ChildNodeインターフェース

Node インターフェイスの継承に加えて、ノード オブジェクトには他のインターフェイスもあります。 ParentNode インターフェイスは、現在のノードが親ノードであることを示し、子ノードを処理するためのいくつかのメソッドを提供します。 ChildNode インターフェイスは、現在のノードが子ノードであることを示し、いくつかの関連メソッドを提供します。

ParentNode インターフェース

現在のノードが親ノードの場合、ParentNode インターフェースが混在します。要素ノード (element)、ドキュメント ノード (document)、およびドキュメント フラグメント ノード (documentFragment) のみが子ノードを持つため、これら 3 種類のノードのみが ParentNode インターフェイスを持ちます。

ParentNode.children

children プロパティは、メンバーがすべて現在のノードの要素子ノードである HTMLCollection インスタンスを返します。このプロパティは読み取り専用です。

以下は、ノードのすべての子要素を走査する例です。

for (var i = 0; i < el.children.length; i++) {
  // ...
}

children 属性には要素の子ノードのみが含まれ、他のタイプの子ノード (テキストの子ノードなど) は含まれないことに注意してください。要素タイプの子ノードがない場合、HTMLCollection インスタンスの戻り値 length プロパティは 0 になります。

さらに、HTMLCollection は動的コレクションであり、DOM への変更をリアルタイムで反映します。

ParentNode.firstElementChild

firstElementChild プロパティは、現在のノードの最初の要素の子ノードを返します。子要素がない場合は、「null」が返されます。

document.firstElementChild.nodeName
// "HTML"

上記のコードでは、document ノードの最初の要素の子ノードは <HTML> です。

ParentNode.lastElementChild

lastElementChild プロパティは、現在のノードの最後の要素の子ノードを返します。要素の子ノードがない場合は null を返します。

document.lastElementChild.nodeName
// "HTML"

上記のコードでは、document ノードの最後の要素子ノードは <HTML> です (document にはこの 1 つの要素子ノードしか含まれていないため)。

ParentNode.childElementCount

childElementCount プロパティは、現在のノードのすべての要素の子ノードの数を表す整数を返します。子要素が含まれていない場合は、「0」を返します。

document.body.childElementCount // 13

ParentNode.append()、ParentNode.prepend()

(1)ParentNode.append()

append() メソッドは、1 つ以上の子ノードを現在のノードに追加します。位置は最後の要素の子ノードの後に​​あります。

このメソッドは、要素のサブノード (パラメーターは要素ノード) を追加できるだけでなく、テキストのサブノード (パラメーターは文字列) も追加できます。

var 親 = document.body;

//要素の子ノードを追加
var p = document.createElement('p');
親.append(p);

//テキストサブノードを追加
親.append('こんにちは');

//複数の要素の子ノードを追加します
var p1 = document.createElement('p');
var p2 = document.createElement('p');
親.append(p1, p2);

//要素サブノードとテキストサブノードを追加します
var p = document.createElement('p');
parent.append('Hello', p);

このメソッドには戻り値がありません。

このメソッドは Node.prototype.appendChild() メソッドと 3 つの点で異なりますので注意してください。

  • append() はパラメータとして文字列を許可しますが、appendChild() はパラメータとして子ノードのみを許可します。
  • append() には戻り値がありませんが、appendChild() は追加された子ノードを返します。
  • append() は複数の子ノードと文字列を追加できます (つまり、複数のパラメーターが許可されます)。 appendChild() は 1 つのノードのみ追加できます (つまり、1 つのパラメーターのみが許可されます)。

(2)ParentNode.prepend()

prepend() メソッドは 1 つ以上の子ノードを現在のノードに追加します。その位置は最初の要素の子ノードの前になります。使い方は append() メソッドとまったく同じで、戻り値もありません。

ChildNode インターフェース

ノードに親ノードがある場合、そのノードには ChildNode インターフェイスがあります。

ChildNode.remove()

remove() メソッドは、現在のノードを親ノードから削除するために使用されます。

el.remove()

上記のコードは、DOM から el ノードを削除します。

ChildNode.before()、ChildNode.after()

(1)ChildNode.before()

before() メソッドは、現在のノードの前に 1 つ以上の兄弟ノードを挿入するために使用されます。どちらも同じ親ノードを持っています。

このメソッドは要素ノードだけでなくテキスト ノードも挿入できることに注意してください。

var p = document.createElement('p');
var p1 = document.createElement('p');

//要素ノードを挿入
el.before(p);

//テキストノードを挿入
el.before('こんにちは');

//複数の要素ノードを挿入
el.before(p, p1);

//要素ノードとテキストノードを挿入
el.before(p, 'こんにちは');

(2)ChildNode.after()

after() メソッドは、現在のノードの後に​​ 1 つ以上の兄弟ノードを挿入するために使用されます。両方のノードは同じ親ノードを持ちます。使い方は「before」メソッドとまったく同じです。

ChildNode.replaceWith()

replaceWith() メソッドはパラメータ node を使用して現在のノードを置き換えます。パラメータは要素ノードまたはテキスト ノードにすることができます。

varspan = document.createElement('span');
el.replaceWith(スパン);

上記のコードでは、「el」ノードが「span」ノードに置き換えられます。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章