多标签点击排序问题(获取点击标签的顺序等)

1.问题描述：
有n个同样的标签，随便点击一个如何确定点击的是哪个标签？
进一步问题：

来自百度笔试
2.解决多标签点击获取顺序问题，

<ul>    <li>5</li>    <li>2</li>    <li>3</li>    <li>88</li>    <li>00</li></ul>

var li = document.getElementsByTagName('li');//ByTagName或者ClassName都获取页面所有的标签和class,返回一个集合（不是数组）。document.onclick = function(e){        for(var i=0;i<li.length;i++){            if(li[i]==e.target){                alert(i);                break;            }        }    }

以上代码可以实现点击一个li标签就会返回其在父元素下的顺序，分析如下：
获取的li集合不是Array类型，但具有length属性，可以用li[x]访问子元素也就是一个节点。定义一个监听事件，通过e.target判断是哪个li被点击。
网上看到一些解决这个问题的方法，主流是一个通过for循环给给每个li添加监听事件的，当li标签很多，性能就会变差，我的代码比较简洁。需要注意的是，返回的li是页面所有的li标签，所以页面有多个ul,ol时，需要区分出你想判断的li块，建议给每个li加一个class.
2.多标签点击排序问题–百度笔试题目的解决：
（只实现了点击降序，升序思路一样的）

    var th = document.getElementsByTagName('th');    var td = document.getElementsByTagName('td');    var tr = document.getElementsByTagName('tr');    var table = document.getElementsByTagName('table');    //th,td都是返回的节点集合，不是数组类型不可以用forEach,find这些方法，只可以用for 然后th[i]选择元素    //console.log(td);    var table = document.getElementsByTagName('table');    document.onclick = function(e){        for(var i=0;i<th.length;i++){            if(th[i]==e.target){                console.log(i);                sortBy(i);                break;            }        }    }    function sortBy(i){        var array=[];        for(var j=1;j<tr.length;j++){            array.push(tr[j]);        }        array.sort(function(a,b){return a.cells[i].innerText-b.cells[i].innerText;});        var iHTML = "";        array.forEach(function(elem){            iHTML+='<tr>'+elem.innerHTML+'</tr>';        });        table[0].innerHTML = '<table>'+'<tr>'+tr[0].innerHTML+'</tr>'+iHTML+'</table>';    }

效果展示（点击敏捷那一栏之前和之后）


关键点分析：获取顺序就是之前那个思路，这里主要是解决排序的思路。
核心是用tr下cells属性包含其下的td集合，return a.cells[i].innerText-b.cells[i].innerText; 就可以达到排序的目的，要活用sort函数。把集合内容提取出来放在数组然后排序，之后在把其innerHTML进行拼接，付给table，就可以实现点击排序要求了。
反思：cells这个属性可能不常见，可能只对table有效，如果遇到ul li呢？
发现children属性很好用，会返回子元素的集合而不会像childNodes一样需要筛选。

<ul id="myul">    <li>5</li>    <li>2</li>    <li>3</li>    <li>88</li>    <li>00</li></ul>    var myul = document.getElementById("myul");    console.log(myul.children);