document的遍历方式

整个html页面就是一个树状的结构

一个页面是一个windows  ( 如果是frameset 方式拼接起来的页面话  好像一个frame就是一个windows)
windows下有document节点

在你要寻找某个节点的时候 可以用 父子的层次关系去取得 (因为是树状结构 所以用递归的方式进行遍历)
比如
//根据标签名称tagName，得到第一个符合标签的子元素
//如果第一层子元素没有找到相关的节点，那么遍历所有的子结点。
function getChildNodeByTag(obj,tagName){
    var _tempNodes = obj.childNodes;
    if(_tempNodes==null||_tempNodes.length==0){
        return null;
    }else {
        for(var i=0;i<_tempnodes.length>            if(_tempNodes[i].tagName&&_tempNodes[i].tagName.toLowerCase()==tagName.toLowerCase())
                return _tempNodes[i];            
        }
        for(var i=0;i<_tempnodes.length>            // 递归遍历
            var _tempChildNode=getChildNodeByTag(_tempNodes[i],tagName);
            if(_tempChildNode!=null )
                return _tempChildNode;
        }
    }
    return null;
}

进一步升级成为 不光可以根据tagName 还可以根据你自定义的任意属性Attribute

//根据属性值，得到第一个符合标准的子结点
function getChildNodeByAttribute(obj,attr_name,attr_value){
    var _tempNodes = obj.childNodes;
    if(_tempNodes==null||_tempNodes.length==0){
        return null;
    }else {
        for(var i=0;i<_tempnodes.length>            // 判断可以是自定义的任意属性
            if("getAttribute" in _tempNodes[i]&&_tempNodes[i].getAttribute(attr_name)==attr_value){
                return _tempNodes[i];
            }
        }
        for(var i=0;i<_tempnodes.length>            var tempObj =getChildNodeByAttribute(_tempNodes[i],attr_name,attr_value);
            if(tempObj!=null)
                return tempObj;
        }
    }
    return null;
}
// 有了上面的方法就可以 把某一类控件 不管在什么位置上的控件 可以一起取得
    (如果有名字相同的也可以 根据名字把他们都取来 然后看看这些控件中 那一个是有自定义那个属性的 不过没有试过这种方式
    因为看到有取得页面所有td tr table的方法 上网查吧
    )

下面就展示了 取得一个table 上所有 具有自定属性和值相符的控件
由于控件有重名现象 比如radio那么就 就用了array来存放这些控件

//根据属性值，得到所有符合标准的子结点
var tagObj = {};
var controlArray = {};
//根据属性值，得到所有符合标准的子结点
function getChildNodeByTagName(obj,tag_name,tar_value){
    var _tempNodes = obj.childNodes;
    if(_tempNodes==null||_tempNodes.length==0){
        return null;
    }else {
        for(var i=0;i<_tempnodes.length>            if(_tempNodes[i].tagName
                &&(_tempNodes[i].tagName.toLowerCase()=="td".toLowerCase()
                    || _tempNodes[i].tagName.toLowerCase()=="select".toLowerCase()
                    || _tempNodes[i].tagName.toLowerCase()=="input".toLowerCase())
                &&_tempNodes[i].getAttribute(tag_name)==tar_value
            ){
                if(_tempNodes[i].tagName.toLowerCase()=="td".toLowerCase())
                {
                    // td的时候用id
                        tagObj[_tempNodes[i].getAttribute("id")]="td"
                        controlArray[_tempNodes[i].getAttribute("id")]=_tempNodes[i];
                }else if( _tempNodes[i].tagName.toLowerCase()=="input".toLowerCase())
                {
                    if(_tempNodes[i].type=="radio"){
                        // textbox的时候用id
                        tagObj[_tempNodes[i].getAttribute("name")]="radio"        
                        controlArray[_tempNodes[i].getAttribute("name")]=_tempNodes[i];            
                    }else{
                        // textbox的时候用id
                        tagObj[_tempNodes[i].getAttribute("name")]="text"
                        controlArray[_tempNodes[i].getAttribute("name")]=_tempNodes[i];        
                    }
                }else{
                    // select 的时候用的用name
                        tagObj[_tempNodes[i].getAttribute("name")]="select"
                        controlArray[_tempNodes[i].getAttribute("name")]=_tempNodes[i];        
                }
            }else{
                getChildNodeByTagName(_tempNodes[i],tag_name,tar_value);
            }
        }
    }
    return tagObj;
}

下面的方式 是通过上面取得一种自己想要的控件
遍历这些控件和 jason中的值 jason可以理解为数据

function contrlsSetValueByJason(contrlArray,tempJson){
      for(var index=0;index        var bj = contrlArray[index];
        var bjKey=""
        if(obj.tagName.toLowerCase()=="select".toLowerCase()){
            objKey = obj.getAttribute("name");
            jasonInitializeItim(tempJson,objKey,"0")    
            obj.value = tempJson[objKey];
        }else if (obj.tagName.toLowerCase()=="input".toLowerCase()){
            objKey = obj.getAttribute("name");
            if(obj.type=="radio"){
                if(obj.value == tempJson[objKey]){
                    obj.checked= true
                }
            }else if(obj.type=="text"){
                obj.value = tempJson[objKey];
            }
        }else if (obj.tagName.toLowerCase()=="td".toLowerCase()){
            objKey = obj.getAttribute("id");
            obj.innerText = tempJson[objKey];        
        }
    }
}

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/64065/viewspace-677237/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/64065/viewspace-677237/