今天来总结下JS获取DOM节点的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
// JS对象式写法 var Base ={ getId: function (id){ return document.getElementById(id); }, getName: function (name) { return document.getElementsByName(name); }, getTagName:function (tag){ return document.getElementsByTagName(tag); } } //调用的时候可以使用 Base.getName("body")[0]; 进行获取 ———————————————————————————————————————— // JS 函数式写法 // 获取ID function getId (id) { return document.getElementById(id); } //获取标签 function getTagName(tag) { return document.getElementsByTagName(tag); } // 获取 name function getName (name) { return document.getElementsByName(name); } // 获取class类 function getClassName(className) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == className) { classElements[classElements.length] = allElements[i]; } } return classElements; } 这样其实可以简写很多代码：（看例子） 如果要获取一个为'js'的ID var js = document.getElementById('js'); //最原始的写法 var js = getId('js'); //函数式 var js = Base.getId('js'); //对象式 PS：其实也可以把Base 换成一个$ 符号， 最后就是 $.getId('id') |
PS：我们都知道JS 如果要通过Class名称来获取DOM节点，需要自己写一个方法来进行调用
思路就是：创建一个空数组，和一个获取所有的DOM节点的变量，遍历所有的DOM节点，如果标签的className属性 等于你想获取的属性，就把他存到创建的空数组里面，最后返回出来