JavaScript中DOM查询封装函数

最新推荐文章于 2024-11-05 22:07:06 发布

忍者1

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量119

点赞数

分类专栏：前端文章标签： javascript 封装

原文链接：http://www.mark-to-win.com/tutorial/50686.html

版权

JavaScript BOM DOM操作 CSS选择器封装函数

关键词由CSDN通过智能技术生成

前端专栏收录该内容

101 篇文章 0 订阅

订阅专栏

在JavaScript中可以通过BOM查询html文档中的元素，也就是所谓的在html中获取对象然后对它添加一个函数。

常用的方法有以下几种：

①document.getElementById()    通过元素ID在全局查找元素

②document.getElementsByTagName（）    通过元素标签名字在全局查找元素

    element.getElementsByTagName（）    通过元素标签在指定元素内部查找元素

③document.getElementsByClassName（）    通过元素标签的className在全局查找元素

    element.getElementsByClassName（）    通过元素标签的className在指定元素内部查找元素

但是很多实际情况下，用这三种方法不是很方便，很多时候需要多次调用，就晓得有点麻烦，代码量也有点大，所以这个时候我们就需要将查询函数封装成一个函数。这里我们可以参照css包含选择器的特性，给函数传递一串字符串。比如如下所示：

html结构：

在这里插入图片描述传递的参数如下：

 var atrr = $(".box .box1 .div1 span");

然后就是封装函数了。

首先我们需要获取最外层的一个html标签，然后再在这个标签内部去查找我们需要的元素。

var result = document.getElementsByTagName("html");

上面的代码中我们获取了html中最外层的标签<html>标签

然后将接收到的字符串按照空格分隔为一个数组，数组的每个元素为一个className、ID或者标签名。然后接下来就是遍历了。

    当数组元素为className时，我们就需要调用element.getElementsByClassName（） 来获取元素

    当数组元素为标签名时，我们就需要调用element.getElementsByTagName（） 来获取元素

    当数组元素为ID时，我们就需要调用document.getElementById()  来获取元素

最后当遍历完成的时候，我们也就查找到了我们需要的内容。代码如下：

function $(selector){
    var strs = selector.split(" ");//通过空格切割传递的字符串
    var result = document.getElementsByTagName("html");//获取最外层的dom元素
    for(var i = 0,len = strs.length;i<len;i++){//根据传过来的字符串，一层一层的遍历查找dom
        if(strs[i].charAt(0)==="#"){//如果是id，返回的是dom元素
            result = document.getElementById(strs[i].slice(1));
        }else if(strs[i].charAt(0)==="."){//如果是class，则返回的是一个伪数组（集合），需要加一个下标，才能获得dom
            result = byClass(strs[i].slice(1),result[0]);
        }else{//如果是tagName
            if(i===0)//代表传递的字符串只有一个tagName，
                result = result[0].getElementsByTagName(strs[i]);
            else