• 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    第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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    //body结构

    • 菜单 1
    • 菜单 2
    • 菜单 3
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 相关阅读:
    使用docker-compose命令行向远程主机编排容器
    SpringAOP是什么?为什么要有SpringAOP?
    java ThreadLocal
    技术分享 | Appium 用例录制
    MySQL01
    激活WinEdt 11.1
    java计算机毕业设计好物网站MyBatis+系统+LW文档+源码+调试部署
    JavaScript 单线程之异步编程
    C++入门基础
    Gin路由中间件详解
  • 原文地址:https://blog.csdn.net/cdcdhj/article/details/132835035