JS_Element 继承-优快云博客

本文详细介绍了DOM的继承机制，对比了jQuery和Prototype的不同实现方式，并通过实例展示了如何在不同环境下灵活运用这些技术，旨在帮助开发者更深入地理解JavaScript中的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
 * DOM的继承, JQ是用一个工厂函数,Prototype是用原型链,但是在IE67只能静态的生成方法.
 * 两者合二为一为怎样呢? 一下就是我们的实现, IE7以上用原型继承Element,IE7和IE6,用构造函数,为了随时能切换在方法中写了dom()方法来获取DOM元素方便切换.
 */
<div class="main1" id="main">111a</div>
<div class="main2">222b</div>
<script type="text/javascript">
/*----继承开始----*/
var Elementextend = function(oldO,newO){
    for(var i in newO){
        ~function(){
            var value = newO[i];
            oldO[i] = function(){
                return value.apply(null,[this].concat(Array.prototype.slice.call(arguments)))
                };
            }();
        }
    }
var ElementextendforIe67 = function(oldO,newO){
    for(var i in newO){
        ~function(){
            var value = newO[i];
            oldO[i] = function(){
                return value.apply(null,[this.node].concat(Array.prototype.slice.call(arguments)))
                };
            }();
        }
    }
var Method = {
    show : function(ele){
        alert(ele.id)
          return $(ele)
        },
    html : function(ele){
        alert(ele.innerHTML);
          return $(ele)
        },
     dom : function(ele){
         return ele;
         }
    }
var isElement = !!window.Element;
if(isElement){
    Elementextend(HTMLElement.prototype,Method);
    }else{
    var myElement = function(node){
        this.node = node;
        }
    ElementextendforIe67(myElement.prototype,Method);
    }
/*----继承结束----*/
/*----IE67的工厂函数----*/
function $(node){
    var arr = [];
    if(!node.length){
        var renode = null;
        isElement ? renode = node : renode =  new myElement(node);
        return renode;
        }
    for(var i=0,j=node.length;i<j;i++){
        isElement ? arr.push(node[i]) : arr.push(new myElement(node[i]));
        }
    return arr;
    }
/*----实例----*/
var main = document.getElementsByTagName("div");
var a = $(main)[0].show().html().dom().className;
alert(a)
</script>