javascript元素历遍子元素函数的写法,并输出

第1种在函数内部调用字面量对象的方法,并返回被历遍的子元素

 <script type="text/javascript">
                var mydiv=document.getElementById("mydiv");
                function eleall(element)
                {
                    var i,len,
                        child=element.firstChild;
                        //循环子元素
                        while(child !=element.lastChild)
                        {
                            
                            if(child.nodeType==1)
                            {
                               //调用返回的字面量方法处理历遍的子元素
                              return  process(child);
                            }
                            child=child.nextSibling;
                        }
                    var processItem={
                        i:0,
                        childArray:new Array(),
                        item:function(child)
                        {
                            if(child.hasChildNodes())
                            {
                                for(this.i=0,len=child.childNodes.length;this.i<len;this.i++)
                                {
                                    if(child.childNodes[this.i].nodeType==1)
                                    {
                                            this.childArray.push(child.childNodes[this.i]);
                                    }
                                }
                                return this.childArray;
                            }
                        }
                    };
					//返回函数内部的字面量对象方法
                    return {
                        process:processItem.item(child)
                    };

                }
                    

         
                var s=eleall(mydiv);
                console.log(s[0].innerText);
                //console.log(mydiv);
                mydiv=null;
           </script>

第2 种是在函数外部调用另一个函数处理子元素

 <script type="text/javascript">
                var mydiv=document.getElementById("mydiv");
                function eleall(element)
                {
                    var i,len,
                        child=element.firstChild;
                        while(child !=element.lastChild)
                        {
                            
                            if(child.nodeType==1)
                            {
                               
                              return  process(child);
                            }
                            child=child.nextSibling;
                       } 
                }
                    

                var process=function(child){
                    var i,childArr=[];
                        if(child.hasChildNodes())
                        {
                            
                            for(i=0,len=child.childNodes.length;i<len;i++)
                            {
                               if(child.childNodes[i].nodeType==1)
                               {
                                    childArr.push(child.childNodes[i]);
                               }
                            }
                            
                        }
                        return childArr;
                        
                    }; 
                var s=eleall(mydiv);
                console.log(s[0].innerText);
                //console.log(mydiv);
                mydiv=null;
           </script>

//body结构

  • 菜单 1
  • 菜单 2
  • 菜单 3

你可能感兴趣的:(javascript学习日记,javascript,开发语言)