古くからある問題に列挙されたリストを全削除したい場合・・・
for (let index = 0; index < shadow.children.length; index++) {
shadow.children[index].remove(); あるいは shadow.removeChildren(shadow.children[index]);
}
console.log('remain object:' + shadow.children.length;
>> remain object:1.と残ってしまいがち。
リストを先頭から順に削除しているのでイテレータの思いとのすれ違いが起きてしまう。
while (0 < shadow.children.length) {
shadow.children[0].remove(); あるいは shadow.removeChildren(shadow.children[0]);
};
console.log('remain object:' + shadow.children.length + ".");
>> remain object:0.この様にイテレータを使わないのが正解だけど、[0]のマジックナンバーは～とか云われそう。
while (0 < shadow.children.length) {
shadow.firstChild.remove();
};
console.log('remain object:' + shadow.children.length + ".");
>> remain object:0.の方がいいかな？
for (let ch in shadow.children) {
ch.remove();
>> Uncaught TypeError TypeError: ch.remove is not a function
};
console.log('remain object:' + shadow.children.length + ".");とすると、最後の方でchに’length’が割り当てられて、TypeErrorが起きてしまうのはお約束。
for (let ch of shadow.children) {
ch.remove();
};
console.log('remain object:' + shadow.children.length + ".");
>> remain object:1.で、エラーは起きないけど、やはりイテレータとのすれ違いで消し残りが出てしまう。
今なら
Array.from(shadow.children).forEach(ch => ch.remove());
console.log('remain object:' + shadow.children.length + ".");が良さそうかな？fromの名前がちょっとアレだけど。（笑
shadow.innerHTML= '';やっぱりコレか！
でもいっぱいエレメントが入っていると遅いらしい。
var clone = shadow.cloneNode( false );
>> Uncaught DOMException DOMException: Failed to execute 'cloneNode' on 'Node': ShadowRoot nodes are not clonable.
shadow.parentNode.replaceChild( clone , shadow );親エレメントの方ですげ替えした方が速そうだけど・・・
shadowでは無理