JavaScript遍历页面寻找节点的一些技巧

1.寻找兄弟节点(上一个节点/下一个节点)  --为日期控件的input节点设置字体样式

  var imgArr=document.getElementsByTagName("img");
  for(  var i=0;i<imgArr.length;i++){
   if(imgArr[i].src=="http://localhost:8090/web/product/taskform/report/My97DatePicker/skin/datePicker.gif"){
    //获取上一个节点
    var inputs=imgArr[i].previousSibling;  //nextSibling临近的下一个节点
    if(inputs!=null){
     inputs.style.fontSize="7pt";
     inputs.style.fontBlob=true;
     inputs.style.fontWeight="normal";
    }
   }
  }

 

2.寻找父节点 --控制复选框的父节点td元素，添加onclick事件控制复选框

  var   getCK=document.getElementsByTagName('input');
  for(var   i=0;i<getCK.length;i++){
      var whichObj=getCK[i];
      //判断是否为复选框,如果是则获取父节点
         if(whichObj.type=="checkbox"){
     var parent_Node=whichObj.parentNode;
   if (parent_Node != null) {
    parent_Node.onclick=function(){
     var chkchild=this.firstChild;
     if(chkchild.checked){
      chkchild.checked=false;
     }
     else{
      chkchild.checked=true;
     }
    }
    }
       }
   }

 

3.按钮的onclick事件触发validate方法，检查页面未填写项，并且标记上颜色

 

     //检查填写项方法
   function  validate(){
        var textareas=document.getElementsByTagName('textarea');
        var selects=document.getElementsByTagName('select');
        var texts=document.getElementsByTagName('input');
        ergodicTextArea(textareas);
        ergodicSelect(selects);
        ergodicText(texts);
   }

    //验证文本域textarea
   function ergodicTextArea(obj){
    for(var i=0;i<obj.length;i++){
         var whichObj=obj[i];
             //有值
            if(whichObj.value.replace(/\s+/g,"")!=""){
            }
            //有空值,则添加样式
            else{
                whichObj.style.border="2px solid red";
            }
         whichObj.onblur=function(){
             if(this.value.replace(/\s+/g,"")!=""){
                this.style.border="1px solid black";
            }
            else{
            }
         }
    }
  }

    //验证下拉框select
  function ergodicSelect(obj){
    for(var i=0;i<obj.length;i++){
         var whichObj=obj[i];

            if(whichObj.value!=""){
            }
            else{
                whichObj.style.backgroundColor="red";
            }
         whichObj.onblur=function(){
             if(this.value!=""){
                this.style.backgroundColor="#fff";
            }
            else{
            }
         }
    }
  }

      //验证文本框text
  function ergodicText(obj){
    for(var i=0;i<obj.length;i++){
        var whichObj=obj[i];
         if(whichObj.type=="text"){
             //是否有值如果没值添加样式
            if(whichObj.value.replace(/\s+/g,"")!=""){
            }
            //有空值,则添加样式
            else{
                whichObj.style.border="2px solid red";
            }
         }
         whichObj.onblur=function(){
             if(this.value.replace(/\s+/g,"")!=""){
                this.style.border="1px solid black";
            }
            else{
            }
         }
    }
  }

 

JS获取select文本值方法:

document.getElementById('type').options[document.getElementById('type').selectedIndex].text;