DOMのハードコア・ラッピング

カプセル化ドムを行う際には、以下の点を分析する必要があると思います。

質問1：

ノードに親を追加するときに、親ノードを追加すればいいのでは？

• dom.append(parent,node)を直接実行するとエラーになります。
• 親を追加する前に、その親にページ上の場所を与えるべきです。
• 何もないところから親を登場させることはできません。

wrap(node, parent){
 dom.before(node, parent)
 dom.append(parent, node)
 }

質問2：

ノードの子を削除するとき、常に最初の子が削除されるのはなぜですか？

• forループを使ってすべての子を繰り返し、それらを削除すると、長さがリアルタイムで変化していることがわかります！
• 別の考え方を試してみてください。
• ノードの最初の子をxに与え、xが存在するかどうかを判断し、存在すれば削除します。
• この時点で、ノードが更新され、ノードの最初の子が x に与えられ、x が存在しなくなるまで、ノードの子の配列が返されます。

 empty(node){
 const array = []
 let x = node.firstChild
 while(x){
 array.push(dom.remove(node.firstChild))
 x = node.firstChild
 }
 return array
 }

以下のコードを解析してください： set/view ノードのスタイル属性 オーバーロード＋適応

style(node, name, value){
 if(arguments.length===3){ //パラメータが3つある場合は、style属性を設定する。
 // dom.style(div, 'color', 'red')
 node.style[name] = value
 }else if(arguments.length===2){
 if(typeof name === 'string'){ //パラメータが2つあり、nameが文字列の場合は、style属性を参照のこと。
 // dom.style(div, 'color')
 return node.style[name]
 }else if(name instanceof Object){ //パラメーターが2つあり、nameがオブジェクトの場合、style属性を設定する。
 // dom.style(div, {color: 'red'})
 const object = name
 for(let key in object){ //プロパティを反復処理する
 node.style[key] = object[key]
 }
 }
 }
 }

以下のコードを解析してください：セレクタが selector であるノードを見つけます。

//もしセレクタがスコープ・ノードに見つからなければ、ページ全体を見てセレクタを探す。
探す{ 
 return (scope 
 document).querySelectorAll(selector)
 }

以下のコードを解析してください。

//フィルター・メソッドを使って自分自身を除外する
兄弟姉妹{
 return Array.from(node.parentNode.children)
 .filter(n=>n!==node)
 }

以下のコードを分析してください。

• テンプレート: すべてのタグを保持可能
• trim：タグの両側からスペースを取り除きます。
• 戻り値は正しい内容でなければなりません。

create(string) {
 const container = document.createElement("template");
 container.innerHTML = string.trim();
 return container.content.firstChild;
 }
 dom.create(" <div><strong> </strong></div> ")