有关document.getElementsByClassName和document.getElementsBytagName的区别和共性
一、document.getElementsByClassName:
返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时,会搜索整个DOM文档,包含根节点。也可以在任意元素上调用getElementsByClassName()
方法,它将返回的是以当前元素为根节点,所有指定类名的子元素。
语法:
var boxArr = document.getElementsByClassName("box");
例如获取box类名的用法:
1 //1.获取事件源 2 // var boxArr = document.getElementsByTagName("box"); 3 4 var boxArr = document.getElementsByClassName("box"); 5 //2.调用函数 6 for(var i=0;i<boxArr.length;i++){ 7 fn(boxArr[i]); 8 } 9 10 //3.函数封装 11 function fn(ele){ 12 var liArr = ele.getElementsByTagName("li"); 13 var spanArr = ele.getElementsByTagName("span"); 14 //绑定事件 15 for(var i=0;i<liArr.length;i++){ 16 //绑定索引值(自定义属性) 17 liArr[i].setAttribute("index",i); 18 liArr[i].onmouseover = function (){ 19 for(var j=0;j<liArr.length;j++){ 20 liArr[j].removeAttribute("class"); 21 spanArr[j].removeAttribute("class"); 22 } 23 this.setAttribute("class","current"); 24 spanArr[this.getAttribute("index")].setAttribute("class","show"); 25 } 26 } 27 }
二、document.getElementsBytagName:
Element.getElementsByTagName()
方法返回一个动态的包含所有指定标签名的元素的HTML集合。指定的元素的子树会被搜索,不包括元素自己。返回的列表是动态的,这意味着它会随着DOM树的变化自动更新自身。所以,使用相同元素和相同参数时,没有必要多次的调用Element.getElementsByTagName()
.
如果是HTML文档中的某个元素调用了getElementsByTagName函数,
运行前会将参数转为小写字母形式。故不建议在驼峰式命名的SVG元素中使用。 Element.getElementsByTagNameNS()
适用于那种情况.
Element.getElementsByTagName
和 Document.getElementsByTagName()
类似,除了它的搜索被限制为指定元素的后代。
语法:
var liArr = document.getElementsByTagName("li");
例如获取box类名的用法:
1 <div class="box">
2 <ul>
3 <li class="current">鞋子</li>
4 </ul>
5 </div>
6 <script>
7 //1.获取事件源
8 var liArr = document.getElementsByTagName("li");
9 var spanArr = document.getElementsByTagName("span");
10 </script>