JavaScript 学习笔记之三----DOM(2)

四、创建DOM节点

                使用document.createElement可以创建一个新的DOM节点元素，同时可以使用document.createElementNS来来判断是否引入了正确xml命名空间（xhtml是xml的一个子集）

 

function create(elem)       {
       returndocument.createElementNS?document.createElementNS(http://www.w3.org/1999/xhtml,elem):document.createElement(elem);
}

 

 

创建一个文本节点时需要使用document.createTextNode方法

五、插入到DOM中

1)   insertBefore和appendChild是一对用于插入元素到DOM中的方法。

 

parentNode.insertBefore(elem,beforeNode);            //插入到父节点中某个子节点的前面
parentNode.appendChild(elem);    //插入到父节点的最后一个节点的后面

 

 

 

 

 

functionbefore(parent, before, elem)          {
   if(elem == null)   {
       elem= before;
       before= parent;
       parent= before.parentNode;
   }
   parent.insertBefore(checkElem(elem),before);
}
 
function append(parent,elem)     {
   parent.appendChild(checkElem(elem);
}
 
function checkElem(elem)             {
   return(elem && elem.constructor == String) ? document.createTextNode(elem) : elem;
}

 

 

这段代码将2个基本的函数参数顺序问题给予了相应的解决，虽然这看上去对功能的实现没有什么作用。

                2)            innerHTML注入DOM

                这个方法在前面提到获取节点元素的html时提到，他不仅是个getter还是个setter。只是这个属性有其弊端。

1、  前面提到的他是html dom only。对xml dom支持不够。

2、  这个方法不是追加html和DOM 而是删除原先的内容后替换。

John Resig提到的解决方案可能就是我们现在看到的jQuery的方案。首先将混有html字符串和dom节点的数组转为纯粹的DOM节点数组。

 

functioncheckElem(a)       {
    varr = [];
    if(a.constructor!= Array) a = [a];
 
    for(var i = 0; i < a.length; i++)         {
           if(a[i].constructor== String)            {
              var div= document.createElement(“div”);
              div.innerHTML= a[i];
 
              for(varj = 0; j < div.childNodes.length; j++)  {
                    r[r.length]= div.childNodes[j];
              }
           }                elseif (a[i].length)              {
               for(varj = 0; j < a[i].length; j++)
                    r[r.length]= a[i][j];
           }                else         {
               r[r.length]= a[i];
           }
    }
 
     return r;
}

 

 

然后再次修改上面的2个函数。

 

functionbefore(parent,before,elem)            {
    if(elem== null)    {
           elem= before;
           before= parent;
           parent= before.parentNode;
}
 
var elems = checkElem(elem);
 
for(var i = elems.length – 1; i >= 0; i--)     {
           parent.insertBefore(elems[i],before);
    }
}
 
function append(parent,elem)            {
    varelems = checkElem(elem);
 
    for(vari = 0;i <= elems.length;i++) {
           parent.appendChild(elems[i]);
    }
}

 

 

六、删除DOM 节点

                使用removeChild即可删除DOM节点

                parent.removeChild(elem);