javascript DOM extension function compatible with all browsers

Today is Friday, very free. There is nothing to do while sitting in front of the computer. People in the product line did not mention any new requirements. There may be new requirements and work arrangements next week, but that is next week. Today I want to write something technical, just as taking notes. My level is limited. I hope everyone can give me some advice and be merciful, haha. Sometimes we want to extend the functionality of DOM elements and add some custom methods to make it more flexible and convenient to use; let’s take an example first:

Copy code The code is as follows: DOM function extension Hello var tagA=document.getElementById("tagA"); tagA.onclick=function(){ alert(this.innerHTML); } //--> There is no doubt that as can be seen from the above code, when you click on the A tag, "Hello" will pop up. tagA is a DOM element, except for onclick In addition to events, there are onmouseover, onmouseout, onmousemove, etc., and these events are all inherent in the DOM element itself; but now we want to extend it, for example, to make it support tagA.bind, I can use tagA.bind( "click",function(){}), instead of tagA.onclick=function(){}. OK, the purpose is very clear now. Let’s look at the following code first: Copy the code The code is as follows: DOM function extension Hello var tagA=document.getElementById("tagA"); tagA.bind("click",function(){ alert(this.innerHTML) ; }) //--> The above This piece of code is the final result after the function is expanded. It has the same function as the previous piece of code, but it cannot be executed now. It needs to be extended. Before that, let’s take a look at some basic knowledge. This is very important. Because we will use it later: 1. HTMLElement. In the DOM standard, each element inherits from HTMLElement, and HTMLElement inherits from Element, and Element inherits from Node; so we can use the prototype of HTMLElement to extend HTML. How to implement the methods and attributes of elements? Let’s look at a piece of code: Copy code The code is as follows: DOM function extension !-- HTMLElement.prototype.Alert=function(){ alert("This is an extension method"); } var tagA=document.getElementById("tagA"); tagA.Alert(); //-->

The above code will pop up "This is an extension method" when the page is loaded. However, I believe you have noticed that it will error in IE6, 7, and 8, but it will not work in IE9 or above or in browsers such as Chrome, Firefox, and Opera. Everything runs normally inside. This is a compatibility issue. Don't worry, it will be solved later. The above code is not flexible enough. Let’s optimize it to make it more flexible: Copy the code The code is as follows: DOM function extension Hello Use dynamic expansion } function Alert(){ alert("This is an extension method"); } var tagA =document.getElementById("tagA"); tagA.Alert(); html>

As can be seen from the above code, with the DOMExtend method, we can implement different extensions by passing in different name and fn. 2. Having finished talking about HTMLElement, let’s talk about event binding. Many people know that the event binding methods of IE and other browsers are different. The code to achieve event binding compatible with all browsers is as follows:

Copy code

The code is as follows: function BindEvent(elem,event,fun){ if(elem.addEventListener){ elem.addEventListener(event,fun,false); } else{ elem.attachEvent("on" event,fun); } }

The following is an example of event binding:

Copy code The code is as follows : DOM function extension Hello &lt ;script type="text/javascript"> function BindEvent(elem,event,fun){ if(elem.addEventListener){ elem.addEventListener(event ,fun,false); var tagA=document.getElementById("tagA "); function Alert(){ alert("This is event binding"); } BindEvent(tagA,"click",Alert); //-- >

After the above code is run, click "Hello" and "This is event binding" will pop up. What is worth mentioning here is the third parameter of addEvenListener. The value here is false, which means to cancel the Capture method and use Bubbling method. There are two standard event triggering methods, one is capture type (caputre) and the other is bubble type; while IE only supports bubble type. The characteristic of the capturing type is that the triggering method triggers the event from the outside to the inside, while the bubbling type triggers the event from the inside to the outside. Assume that the A element in the above code is wrapped with a DIV element. If the A element is related to it The parent element DIV has an onclick event, so the bubble type means that when A is clicked, the event of A will be triggered first, and then the event of DIV will be triggered. Vice versa, it is the capture type. OK, I believe that through the above analysis, we have a good understanding of HTMLElement extension and event binding. Combining these two knowledge points, we can write the following code: Copy code The code is as follows: DOM function extension Hello function DOMExtend(name,fn){ eval("HTMLElement.prototype." name "=" fn);//Here we use dynamic expansion After executing DOMExtend, this here will point to HTMLElement this.addEventListener(event,fun,false);//Standard event binding } else{ this .attachEvent("on " event, fun);//IE's event binding " ); > The click event of tagA can be triggered normally in the browser, so now there is only one problem, which is to be compatible with other browsers; the reason why IE browsers are wrong is because they hide access to HTMLElement, so for IE browsers, We can't use HTMLElement.prototype to extend, but we can achieve the goal by rewriting the following functions: document.body (PS: The above methods seem to be the only ways to obtain DOM elements in memory ~ I don’t know if there are others) After rewriting, and some processing and transformation, you can get the following complete page Code:

Copy code

The code is as follows: DOM功能扩展 你好 function DOMExtend(name, fn){ if(typeof(HTMLElement)!="undefined"){ eval("HTMLElement.prototype." name "=" fn); } else{ var _getElementById=document.getElementById; document.getElementById=function(id){ var _elem=_getElementById(id); eval("_elem." name "=" fn); return _elem; } var _getElementByTagName=document.getElementsByTagName; document.getElementsByTagName=function(tag){ var _elem=_getElementByTagName(tag); var len=_elem.length; for(var i=0;i eval("_elem[" i "]." name "=" fn); } return _elem; } var _createElement=document.createElement; document.createElement=function(tag){ var _elem=_createElement(tag); eval("_elem." name "=" fn); return _elem; } var _documentElement=document.documentElement; eval("_documentElement." name "=" fn); var _documentBody=document.body; eval("_documentBody." name "=" fn); } } function BindEvent(event,fun){ if(this.addEventListener){ this.addEventListener(event,fun,false); } else{ this.attachEvent("on" event,fun); } } DOMExtend("bind",BindEvent);var wrap=do cument.getElementById("tagA" ; >

OK, the compatibility issue has been solved so far. This is the code for DOM element expansion that all browsers can pass smoothly, but there is still a small problem. Careful people will find that the result that pops up in the IE browser is "undefined", not "Hello"; the cause of the problem lies in IE's event binding. Looking at the above code, when alert(this.innerHTML) is called , since the IE binding event uses attachEvent, this points to windows at this time, so the current goal is to change the object pointed to by this and point this to tagA. So after modification, the complete code is as follows:

Copy the code

The code is as follows: DOM功能扩展 你好 function DOMExtend(name, fn){ if(typeof(HTMLElement)!="undefined"){ eval("HTMLElement.prototype." name "=" fn); } else{ var _getElementById=document.getElementById; document.getElementById=function(id){ var _elem=_getElementById(id); eval("_elem." name "=" fn); return _elem; } var _getElementByTagName=document.getElementsByTagName; document.getElementsByTagName=function(tag){ var _elem=_getElementByTagName(tag); var len=_elem.length; for(var i=0;i eval("_elem[" i "]." name "=" fn); } return _elem; } var _createElement=document.createElement; document.createElement=function(tag){ var _elem=_createElement(tag); eval("_elem." name "=" fn); return _elem; } var _documentElement=document.documentElement; eval("_documentElement." name "=" fn); var _documentBody=document.body; eval("_documentBody." name "=" fn); } } function BindEvent(event,fun){ if(this.addEventListener){ this.addEventListener(event,fun,false); } else{ var tag=this; tag.attachEvent("on" event,function(){ fun.apply(tag,arguments);//这里是关键 }); } } DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA"); wrap.bind("click",function(){ alert(this.innerHTML); })