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

cdcdhj

已于 2023-09-12 16:26:06 修改

阅读量322

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript学习日记文章标签： javascript 开发语言

于 2023-09-12 16:25:10 首次发布

本文链接：https://blog.csdn.net/cdcdhj/article/details/132835035

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

本文介绍了两种在JavaScript中处理HTML元素子节点的方法：一种是在函数内部定义并返回字面量对象处理，另一种是外部定义处理函数。通过示例展示了如何递归遍历`<div>`元素的`<ul>`子列表。

第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结构

<div id="mydiv" class="nodeclass">
               <ul id="mylist">
                <li>菜单 1</li>
                <li>菜单 2</li>
                <li>菜单 3</li>
               </ul>
            </div>