做一个类似JQuery获取DOM对象的$()

浏览数：31 / 时间：2015年06月09日

在dom操作时，有时根据id获取单个对象、有时根据className获取多个对象。平常可能我们用两个函数来实现这两个功能。不过我将它们整合了一下，目前使用情况良好，函数如下：

01
// 根据selector获取单个或多个元素，

02
// 获取多个元素时，可以指定元素的tag类型和父元素

03
function $(selector, tag, parent) {

04
    var ret = [];

05
    
06
    //没有传递selector，返回空

07
    if (!selector) { return null; }

08
    //selector为一个dom元素，返回它

09
    //若为文本元素，返回空

10
    if (selector.nodeType) {

11
        return selector.nodeType == 3 ? null : selector;

12
    }

13
    
14
    //如果为一个元素组成的数组或nodeList对象

15
    //如：[dom1,dom2,dom3]或 node.childNodes等情况时

16
    if (selector.length && selector.constructor != String) {

17
        ret = Array.prototype.slice.call(selector, 0, selector.length);

18
        //过滤掉非元素、文本节点、tagName不为tag的结点

19
        for(var i=0; i < ret.length; i++) {

20
            if (!ret[i].nodeType || ret[i].nodeType == 3) { ret.splice(i,1); i--; }

21
            else if (tag && ret[i].tagName.toLowerCase() != tag.toLowerCase()) {

22
                ret.splice(i,1);

23
                i--;

24
            }

25
        }

26
        return ret;

27
    }

28
    
29
    //如果selector为一个字符串

30
    if (selector.constructor == String) {

31
        // 若字符串以.开头，表示按className获取元素

32
        if (/^\.\w+/.test(selector)) {

33
            parent = parent || document;

34
            tag = tag || "*";

35
            nodes = parent.getElementsByTagName(tag);

36
            var className = selector.replace(".", "");

37
            var reg = new RegExp("(^|\\b)" + className + "(\\b|$)");

38
            for(var i=0; i < nodes.length; i++) {

39
                if(reg.test(nodes[i].className)) { ret.push(nodes[i]); }

40
            }

41
            return ret;

42
        }

43
        //否则按ID方式获取对象

44
        return document.getElementById(selector);

45
    }

46
    
47
    // 传入的selector有错误

48
    return null;

49
}

下面它的使用方法，为了配合演示，请先准备如下HTML结合代码：

01
<ul id="test">

02
    <p class="t">Hello,world!</p>

03
    <p>Hello,world!</p>

04
    <li class="t">afasdfsa</li>

05
    <li>sfk</li>

06
    <li class="t">sdklfajsfjk</li>

07
    <li>end</li>

08
    <li class="t">of</li>

09
</ul>

10
<ol>

11
    <li class="t">附加的第一项</li>

12
    <li class="t">附加的第二项</li>

13
    <li class="t">附加的第三项</li>

14
</ol>

上面的代码结构只是为测试而写的，所以比较的另类……勿怪！！！

返回到$函数，它具有如下一些功能：

$() ：返回null；天台县羿壮冶金
$("id") ：返回单个对象，如下：alert ( $("test") ); // object HTMLUListElement
$(".t") ：返回所有className为t的元素组成的数组，如下：alert ( $(".t").length ); //7，共有7个元素的className为t，有木有？
$(".t", ‘li‘) ：返回className为t的li标签对象，如下：alert ( $(".t", ‘li‘).length ); // 6，有一个<p>的类样式也是t，但是被排除了
$(".t", "li", $("test"))：返回ID为test的元素下的<li>且类样式为t的对象，如下：alert ( $(".t", ‘li‘, $("test")).length ); // 3，范围在test之内
$($("test").childNodes) ：将test的子元素组合成一个数组，并过滤掉文本节点，如下：alert ( $($("test").childNodes).length ); //共7个
$($("test").childNodes, ‘p‘) ：获取test的子元素中为<p>的那些元素，如下：alert ( $($("test").childNodes, ‘p‘).length ); // 2，刚好两个<p>
还可以传递一个数组，如下：