js获取元素相对于父级的父级的索引值（Array.prototype.indexOf.call()方法）

需求：利用事件委托，然后点击html中的数字，然后获取数字的父节点li在ul里面的索引值
首先看一下html部分

 <ul>
        <li>
            <span>1</span>
            <p>111</p>
        </li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
        <li><span>7</span></li>
        <li><span>8</span></li>
        <li><span>9</span></li>
        <li><span>10</span></li>
    </ul>

需求：利用事件委托，然后点击数字，然后获取数字的父节点li在ul里面的索引值
下面是js部分

        //事件委托
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function (e) {
            var event = e || window.event;
            var target  = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() != 'li' || target.nodeName.toLowerCase() != 'ul'){
　 　　　　　   //获取元素的父元素
　 　　　　　   var parentLi = target.parentElement;

                //注意这里不要用childNodes,要用children
               // var liIndex =Array.prototype.indexOf.call(target.parentNode.childNodes, target);

               var liIndex =Array.prototype.indexOf.call(parentLi.parentNode.children, parentLi);
               console.log(liIndex)
　　　　    }
        }

---

注意：

//注意这里不要用childNodes,要用children，使用childNodes的话就会获取到text元素，这是因为
    在DOM中实际上有一个叫做textNode的元素，相应的还有document.createTextNode的JS方法，而在IE和Chrome浏览器中会将源代码中的换行符渲染成一个textNode，只是视觉上不可见。
    然而，通过childNodes来获取子元素的时候，结果会包含这些textNode，所以会得到题主所见的情况。
    而解决方法很简单，主要有两种：
    第一，使用children代替childNodes
    第二，遍历childNodes，根据nodeType过滤掉textNode
// var liIndex =Array.prototype.indexOf.call(target.parentNode.childNodes, target);
  var liIndex =Array.prototype.indexOf.call(parentLi.parentNode.children, parentLi);

使用children