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

dom操作的一个简易函数
服务器君一共花费了400.344 ms进行了7次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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

// 根据selector获取单个或多个元素,
// 获取多个元素时,可以指定元素的tag类型和父元素
function $(selector, tag, parent) {
    var ret = [];
    
    //没有传递selector,返回空
    if (!selector) { return null; }
    //selector为一个dom元素,返回它
    //若为文本元素,返回空
    if (selector.nodeType) {
        return selector.nodeType == 3 ? null : selector;
    }
    
    //如果为一个元素组成的数组或nodeList对象
    //如:[dom1,dom2,dom3]或 node.childNodes等情况时
    if (selector.length && selector.constructor != String) {
        ret = Array.prototype.slice.call(selector, 0, selector.length);
        //过滤掉非元素、文本节点、tagName不为tag的结点
        for(var i=0; i < ret.length; i++) {
            if (!ret[i].nodeType || ret[i].nodeType == 3) { ret.splice(i,1); i--; }
            else if (tag && ret[i].tagName.toLowerCase() != tag.toLowerCase()) {
                ret.splice(i,1);
                i--;
            }
        }
        return ret;
    }
    
    //如果selector为一个字符串
    if (selector.constructor == String) {
        // 若字符串以.开头,表示按className获取元素
        if (/^\.\w+/.test(selector)) {
            parent = parent || document;
            tag = tag || "*";
            nodes = parent.getElementsByTagName(tag);
            var className = selector.replace(".", "");
            var reg = new RegExp("(^|\\b)" + className + "(\\b|$)");
            for(var i=0; i < nodes.length; i++) {
                if(reg.test(nodes[i].className)) { ret.push(nodes[i]); }
            }
            return ret;
        }
        //否则按ID方式获取对象
        return document.getElementById(selector);
    }
    
    // 传入的selector有错误
    return null;
}

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

<ul id="test">
    <p class="t">Hello,world!</p>
    <p>Hello,world!</p>
    <li class="t">afasdfsa</li>
    <li>sfk</li>
    <li class="t">sdklfajsfjk</li>
    <li>end</li>
    <li class="t">of</li>
</ul>
<ol>
    <li class="t">附加的第一项</li>
    <li class="t">附加的第二项</li>
    <li class="t">附加的第三项</li>
</ol>

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

返回到$函数,它具有如下一些功能:

  1. $() : 返回null;
  2. $("id") :返回单个对象,如下:alert ( $("test") ); // object HTMLUListElement
  3. $(".t") :返回所有className为t的元素组成的数组,如下:alert ( $(".t").length ); //7,共有7个元素的className为t,有木有?
  4. $(".t", 'li') :返回className为t的li标签对象,如下:alert ( $(".t", 'li').length ); // 6,有一个<p>的类样式也是t,但是被排除了
  5. $(".t", "li", $("test")):返回ID为test的元素下的<li>且类样式为t的对象,如下:alert ( $(".t", 'li', $("test")).length ); // 3,范围在test之内
  6. $($("test").childNodes) : 将test的子元素组合成一个数组,并过滤掉文本节点,如下:alert ( $($("test").childNodes).length ); //共7个
  7. $($("test").childNodes, 'p') : 获取test的子元素中为<p>的那些元素,如下:alert ( $($("test").childNodes, 'p').length ); // 2,刚好两个<p>
  8. 还可以传递一个数组,如下:
  9. var arr = [1,2,3,document, document.body];
    alert ( $(arr).length );  //2 。1,2,3被忽略
    

另外,$与$结合使用的话,就会更加的方便了。以上只是我个人在使用的一个函数,仅供参考。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1278,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1278

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《编程珠玑(第2版)》 Jon Bentley (作者), 黄倩 (译者), 钱丽艳 (译者)

《编程珠玑(第2版)》是计算机科学方面的经典名著。书的内容围绕程序设计人员面对的一系列实际问题展开。作者Jon Bentley 以其独有的洞察力和创造力,引导读者理解这些问题并学会解决方法,而这些正是程序员实际编程生涯中至关重要的。

更多计算机宝库...