JavaScript中DOM查詢封裝函數(shù)

在JavaScript中可以通過BOM查詢html文檔中的元素，也就是所謂的在html中獲取對(duì)象然后對(duì)它添加一個(gè)函數(shù)。

常用的方法有以下幾種：

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

    ②document.getElementsByTagName（）    通過元素標(biāo)簽名字在全局查找元素

        element.getElementsByTagName（）    通過元素標(biāo)簽在指定元素內(nèi)部查找元素

    ③document.getElementsByClassName（）    通過元素標(biāo)簽的className在全局查找元素

        element.getElementsByClassName（）    通過元素標(biāo)簽的className在指定元素內(nèi)部查找元素

    但是很多實(shí)際情況下，用這三種方法不是很方便，很多時(shí)候需要多次調(diào)用，就曉得有點(diǎn)麻煩，代碼量也有點(diǎn)大，所以這個(gè)時(shí)候我們就需要將查詢函數(shù)封裝成一個(gè)函數(shù)。這里我們可以參照css包含選擇器的特性，給函數(shù)傳遞一串字符串。比如如下所示：

    html結(jié)構(gòu)：

    

  















傳遞的參數(shù)如下：

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

    然后就是封裝函數(shù)了。

    首先我們需要獲取最外層的一個(gè)html標(biāo)簽，然后再在這個(gè)標(biāo)簽內(nèi)部去查找我們需要的元素。

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

    上面的代碼中我們獲取了html中最外層的標(biāo)簽<html>標(biāo)簽

    然后將接收到的字符串按照空格分隔為一個(gè)數(shù)組，數(shù)組的每個(gè)元素為一個(gè)className、ID或者標(biāo)簽名。然后接下來就是遍歷了。

        當(dāng)數(shù)組元素為className時(shí)，我們就需要調(diào)用element.getElementsByClassName（） 來獲取元素

        當(dāng)數(shù)組元素為標(biāo)簽名時(shí)，我們就需要調(diào)用element.getElementsByTagName（） 來獲取元素

        當(dāng)數(shù)組元素為ID時(shí)，我們就需要調(diào)用document.getElementById()  來獲取元素

  最后當(dāng)遍歷完成的時(shí)候，我們也就查找到了我們需要的內(nèi)容。代碼如下：

    

    function $(selector){
        var strs = selector.split(" ");//通過空格切割傳遞的字符串
        var result = document.getElementsByTagName("html");//獲取最外層的dom元素
        for(var i = 0,len = strs.length;i<len;i++){//根據(jù)傳過來的字符串，一層一層的遍歷查找dom
            if(strs[i].charAt(0)==="#"){//如果是id，返回的是dom元素
                result = document.getElementById(strs[i].slice(1));
            }else if(strs[i].charAt(0)==="."){//如果是class，則返回的是一個(gè)偽數(shù)組（集合），需要加一個(gè)下標(biāo)，才能獲得dom
                result = byClass(strs[i].slice(1),result[0]);
            }else{//如果是tagName
                if(i===0)//代表傳遞的字符串只有一個(gè)tagName，
                    result = result[0].getElementsByTagName(strs[i]);
                else
                    if(strs[i-1].charAt(0)==="#")//代表上一個(gè)是id，返回的是dom，可以直接調(diào)用
                        result = result.getElementsByTagName(strs[i]);
                    else//代表上一個(gè)是class或者tagName，返回的是集合，需要加下標(biāo)
                        result = result[0].getElementsByTagName(strs[i]);
            }
        }
        
        return result;
    }


    這樣封裝好了之后，我們使用起來就相當(dāng)?shù)姆奖懔恕?/p>


 

 


歡迎關(guān)注微信公眾號(hào):猴哥說前端