妙味：结点选取、结点操作

（兼容）通用子结点选取、第一个子结点、最后一个子结点

（兼容）兄弟结点

   父节点

（函数）通过样式选取

 

 结点：添加、删除

 结点属性：获取与设置

 结点内容：获取与设置

 

 

// 结点选取 ================================================================================
// 子结点-----------------------------------------------------------------------------------
//children为childNodes+nodeType的兼容方法
var oParent=document.getElementById(‘oParentId‘);
var i=0;
for(i=0;i<oParent.length;i++){
     if(oParent.childNodes.nodeType==1){          //判断并对元素结点进行背景设置
          oParent.childNodes[i].style.background=‘red‘;
     }
}

for(i=0;i<oParent.length;i++){
     oParent.children[i].style.background=‘red‘;  //childNodes的兼容方法children,不用再进行判断
}


//firstChild兼容办法，分别为ie与firefox下的写法
var oFirst=oParent.firstElementChild||oParent.firstChild;
var oFirst=oParent.children[0];                                   //另一办法
//lastChild兼容
var oLast=oParent.lastElementChild||oParent.lastChild;
var oLast=oParent.children[oParent.children.length-1];     //另一办法


// 兄弟结点-----------------------------------------------------------------------------------
//nextSibling兼容
var oNext=obj.nextElementSibling||obj.nextSibling;
//previousSibling兼容
var oPre=obj.previousElementSibling||obj.previousSibling;



// 父结点-------------------------------------------------------------------------------------
this.parentNode.style.display=‘none‘;     //parentNode 直接父结点唯一，无兼容问题


// 通过样式选择结点---------------------------------------------------------------------------
// 通过class选择元素，封装函数(可直接使用)：
function getByClass(oParent,sClass){
     var aEle=oParent.getElementsByTagName(‘*‘);
     var aResult=[];
     var i=0;
     for(i=0;i<aEle.length;i++){
          if(aEle[i].className==sClass){
               aResult.push(aEle[i]);
          }
     }
     return aResult;
}




// 结点操作 ===================================================================================
// 添加、删除----------------------------------------------------------------------------------
oBtn.onclick=function(){
     var oLi=document.createElement(‘li‘);          //createElement
     var aLi=oUl.getElementsByTagName(‘li‘);

     oLi.innerHTML=oTxt.value;     //添加内容

     if(aLi.length==0){
          oUl.appendChild(oLi);                         //appendChild
     }else{
          oUl.insertBefore(oLi,aLi[0])               //insertBefore                父.insertBefore(子节点, 谁之前)
     }
}

oUl.removeChild(this.parentNode);                    //removeChild



// 属性操作-----------------------------------------------------------------------------------
var oTxt=document.getElementById(‘txt1‘);
//设置属性值的三种方式
oTxt.value=‘123‘;
oTxt[‘value‘]=‘abc‘;
oTxt.setAttribute(‘value‘,‘rtertw‘);     //此方法设置的不能即时显示出来，但已更改
//获取属性值的三种方法
ss=oTxt.value;
ss=oTxt[‘value‘];
ss=oTxt.getAttribute(‘value‘);
ss=oTxt.getAttribute(‘id‘);

// 内容操作-----------------------------------------------------------------------------------
var oStr=oP.innerHTML;
oP.innerHTML=‘<h3>设置进去的内容</h3>‘;