DOM - 封装函数 / 开普饭

我们来学习封装函数之前，先来回顾一下获取元素节点的方法

获取元素节点的方法

我们之前学了有四个方法：

1.Id

document.getElementById();

2.TagName

node.getElementsByTagName();

3.Name

document.getElementsByName();

4.ClassName

document.getElementsByClassName();

我们在使用这四个方法的时候我们可以发现，这种方法的使用写起来太长了，非常的不方便，因此我们可以通过封装函数来进行简化上述的操作

我们通过封装一个函数，就能拥有上述所有的功能

【注】

通过CSS中的选择器，迅速给当前页面的某一个元素节点去设置样式

比如：

#id

通过id获取元素节点

.class

通过className获取元素节点

tagName

通过tagName获取元素节点

name=xxx

通过name获取元素节点

函数为了简便我们这就命名为 $

function $( vArg ){ //1.对参数进行区分 switch( vArg[ 0 ] ){ case "#"://如果为#当前选择的元素肯定是id return document.getElementById( vArg.substring(1) ); //因为这里提取的是#id，这里不提取#只提id，所以从1 开始提取 break; case ".":

//如果.为当前选择的元素肯定是class，我们上节讲到，由于老的IE不支持class的获取，需要解决一下兼容问题，就需要调用我们上节的函数这里写在了下面

return elementByClassName(document,vArg.substring(1) ); break; default: //因为 name= 五个参数，所以对参数的前五个字符，进行判断 var str = vArg.substring( 0,5 ); if ( str == “name=”){ return document.getElementsByName( vArgsubstring( 5) );}else{ //TagName return document.getElementsByTagName( vArg );} break;}}function elementByClassName(parent, classStr){//<1>找到parent下所有的元素节点var nodes = parent.getElementsByTagName( '*')var result = [];//用记录符合条件的元素节点for(var i = 0; i < nodes.length; i++){//<2>如果符合条件，添加到数组中if(nodes[i].className == classStr){result.push(nodes[i]);}}return result;}

以上就是封装的所有获取节点元素的函数，我们来测试一下正不正确

完整代码如下：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function $(vArg) { //通过获取css选择器第一位符号判断 switch (vArg[0]) { case "#": return document.getElementById(vArg.substring(1)); break; case ".": return elementByClassName(document,vArg.substring(1)) break; default: //对参数前五个字符进行判断 var str =vArg.substring(0,5); if (str == "name=") { return document.getElementsByName(vArg.substring(5)) } else {//tagName return document.getElementsByTagName(vArg) } break; } } function elementByClassName(parent,classStr) { var nodes = parent.getElementsByTagName('*'); var result = []; for (var i = 0; i < nodes.length; i++) { if (nodes[i].className == classStr) { result.push(nodes[i]); } } return result; } window.onload = function(){ alert($("#div1").innerHTML) alert($(".box")[0].innerHTML) alert($("div")[0].innerHTML) alert($("name=hello")[0].innerHTML) }</script> </head> <body> <div id="div1">111111</div> <div class="box">222222</div> <div class="box">333333</div> <div name="hello">444444</div> </body></html>

分别获取了id、class、tag、name的元素节点

运行效果如下：

★ 封装排序和节点函数 ★

我们把数组中排序的方法和现在的节点查询方法封装一起，以后使用时直接调用即可

【注意】我们要新建的是js文件，便于调用

完整代码如下：

//冒泡排序封装function bubble(arr){ for(var i=0;i<arr.length; i++){ //比较的轮次 //每一轮比较的次数 for(var j=0;j<arr.length-i-1;j++){ //判断前后两个数是否复合交换条换if(arr[j] > arr[j+1]){ var tmp = arr[j+1]; arr[j+1] = arr[j]; arr[j] = tmp;} } }}

//选择排序封装function choose(arr){ for(var i=0; i<arr.length-1;i++){ for(var j=i+1;j<arr.length; j++){if(arr[i]>arr[j]){ var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;} } }}

//四种节点封装function $(vArg) { //通过获取css选择器第一位符号判断 switch (vArg[0]) { case "#": return document.getElementById(vArg.substring(1)); break; case ".": return elementByClassName(document,vArg.substring(1)) break; default: //对参数前五个字符进行判断 var str =vArg.substring(0,5); if (str == "name=") { return document.getElementsByName(vArg.substring(5)) } else {//tagName return document.getElementsByTagName(vArg) } break; } } //解决IE兼容性 function elementByClassName(parent,classStr) { var nodes = parent.getElementsByTagName('*'); var result = []; for (var i = 0; i < nodes.length; i++) { if (nodes[i].className == classStr) { result.push(nodes[i]); } } return result; }

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

DOM - 封装函数

相关推荐