有关document.getElementsByClassName和document.getElementsBytagName的区别和共性

一、document.getElementsByClassName:

返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

语法：

var boxArr = document.getElementsByClassName("box");

例如获取box类名的用法：

   //1.获取事件源
//    var boxArr = document.getElementsByTagName("box");

    var boxArr = document.getElementsByClassName("box");
    //2.调用函数
    for(var i=0;i<boxArr.length;i++){
        fn(boxArr[i]);
    }

    //3.函数封装
    function fn(ele){
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        //绑定事件
        for(var i=0;i<liArr.length;i++){
            //绑定索引值（自定义属性）
            liArr[i].setAttribute("index",i);
            liArr[i].onmouseover = function (){
            for(var j=0;j<liArr.length;j++){
                 liArr[j].removeAttribute("class");
                 spanArr[j].removeAttribute("class");
            }
            this.setAttribute("class","current");
            spanArr[this.getAttribute("index")].setAttribute("class","show");
            }
        }
    }

二、document.getElementsBytagName:

Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用Element.getElementsByTagName() .

如果是HTML文档中的某个元素调用了getElementsByTagName函数， 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的SVG元素中使用。 Element.getElementsByTagNameNS() 适用于那种情况.

Element.getElementsByTagName 和 Document.getElementsByTagName()类似，除了它的搜索被限制为指定元素的后代。

语法：

var liArr = document.getElementsByTagName("li");

例如获取box类名的用法：

  <div class="box">
        <ul>
            <li class="current">鞋子</li>
        </ul>
    </div>
    <script>
        //1.获取事件源
        var liArr = document.getElementsByTagName("li");
        var spanArr = document.getElementsByTagName("span");
　　</script>