js和jquery获取当前对象的子元素

开发中经常遇到需要获取ul下的il对象，个人总结了js和jquery的方法。

HTML片断：

    <ul class="box">

        <li>子元素1</li>

        <li>子元素2</li>

        <li>子元素3</li>

        <li>子元素4</li>

        <li>子元素5</li>

    </ul>

先说说jquery的解决方案：

        //获取li内容

        function getLi(obj,index){

            var child = obj.children("li").eq(index);

            return child.html();

        }

        $(function(){

            var c = 0;

            $(".box").click(function(){

                if(c == 0){

                    console.log(getLi($(this),c));

                    c++;

                }else if(c == 1){

                    console.log(getLi($(this),c));

                    c++;

                }else if(c == 2){

                    console.log(getLi($(this),c));

                    c++;

                }else if(c == 3){

                    console.log(getLi($(this),c));

                    c++;

                }else if(c == 4){

                    console.log(getLi($(this),c));

                    c = 0;

                }

            });

        });

$("elementName").children();获取当前对象的子元素(集合)，若子元素有且只有一个就直接通过children()获取。若子元素有多个children()获取的就是一个集合，获取具体一个子元素就需要eq();获取。

再来看看JavaScript的解决方案：

        var c = 0;

        var childArr = document.getElementsByClassName("box")[0].getElementsByTagName("li");

        document.getElementsByClassName("box")[0].onclick = function(){

            if(c == 0){

                    console.log(childArr[c].innerHTML);

                    c++;

                }else if(c == 1){

                    console.log(childArr[c].innerHTML);

                    c++;

                }else if(c == 2){

                    console.log(childArr[c].innerHTML);

                    c++;

                }else if(c == 3){

                    console.log(childArr[c].innerHTML);

                    c++;

                }else if(c == 4){

                    console.log(childArr[c].innerHTML);

                    c = 0;

                }

        }

JS获取子元素用链式调用，DOM.getElement.._Parent.getElement.._Child;(dom.父元素.子元素)。

小结：个人觉得js的调用方式比jquery方便，通过链式调用便可获取元素子集。