首頁 > 開發者 > JavaScript

javascript 相容所有瀏覽器的DOM擴充功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天周五，很閑，坐在電腦前沒什麼事可做，產品線的人也沒提什麼新的需求，可能下周會有新的需求和工作安排，但那是下周的事了。今天就想寫點技術的東西，也就當作是記記筆記，本人水平有限，希望大家多多指教，嘴下留情，哈哈。
　　有時候我們會想擴充DOM元素的功能，可以添加一些自訂的方法，以讓它用起來更加靈活、方便；先來舉個例子： 複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
var tagA=document.getElementById("tagA");
tagA.onclick=function(){
alert(this.innerHTML);
}
//-->
</script>
</body>
</html>

毫無疑問，從以上代碼可以看出，當點擊A標籤的時候會彈出“你好”，tagA是一個DOM元素，除了有onclick事件以外，還有onmouseover,onmouseout,onmousemove等等，而這些事件都是DOM元素本身就具有的；但現在我們希望對它進行擴充，例如可以讓它支援tagA.bind，我可以用tagA.bind("click",function(){}),來代替tagA.onclick=function(){}。OK，現在的目的很明確，先看下面的代碼：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>

以上這段代碼就是功能擴充後的最終效果，它與上一段代碼實現的功能是一樣的，但現在它還不能執行，要進行擴充後才可以，在此之前先來看一些基礎知識，這很重要，因為等下會用到：
　　1、HTMLElement，在DOM標準中，每個元素都繼承自HTMLElement，而HTMLElement又繼承自Element，Element又繼承自Node；於是我們可以使用HTMLElement的Prototype來擴充HTML元素的方法和屬性，如何?？我們來看一段代碼：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
HTMLElement.prototype.Alert=function(){
alert("這是一個擴充方法");
}
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>

以上代碼在頁面載入的時候就彈出“這是一個擴充方法”，不過相信你已經注意到了，在IE6,7,8裡面會出錯，但在IE9以上或者Chrome,Firefox,Opera這些瀏覽器裡面都能正常運行，這是相容性問題，不用擔心，後面會解決。
　　以上的代碼靈活性不夠好，我們最佳化一下，讓它更加靈活：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這裡我們採用動態擴充
}
function Alert(){
alert("這是一個擴充方法");
}
DOMExtend("Alert",Alert);
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>

從以上代碼可以看出，有了DOMExtend這個方法以後，我們就可以通過傳入不用的name 和 fn 實現不同的擴充。
　　2、以上講完了HTMLElement，接下來講講事件的綁定，很多人都知道，IE和其他瀏覽器的事件綁定方式不一樣，實現相容所有瀏覽器的事件綁定的代碼如下：複製代碼 代碼如下:function BindEvent(elem,event,fun){
if(elem.addEventListener){
elem.addEventListener(event,fun,false);
}
else{
elem.attachEvent("on"+event,fun);
}
}

以下是事件綁定的使用例子：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function BindEvent(elem,event,fun){
if(elem.addEventListener){
elem.addEventListener(event,fun,false);
}
else{
elem.attachEvent("on"+event,fun);
}
}
var tagA=document.getElementById("tagA");
function Alert(){
alert("這是事件綁定");
}
BindEvent(tagA,"click",Alert);
//-->
</script>
</body>
</html>

以上代碼運行後，點擊“你好”就會彈出“這是事件綁定”，這裡值得一提的就是addEvenListener的第三個參數，這裡的值是false，意思是取消Capture方式而採用冒泡方式。標準的事件有兩種觸發方式，一種是捕獲型（caputre），另一種是冒泡型；而IE只支援冒泡型。捕獲型的特點是觸發方式是從外到內的方式觸發事件，而冒泡型就是從內到外的方式觸發事件，假設以上代碼的A元素外層包了一個DIV元素，如果A元素與它的父元素DIV都有一個onclick事件，那麼冒泡型就是點擊A的時候會先觸發A的事件，然後再觸發DIV的事件，反之就是捕獲型。
　　OK，相信通過以上的分析，對HTMLElement擴充和事件綁定都有了相當的瞭解，結合這兩個知識點，我們可以寫出如下的代碼：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這裡我們採用動態擴充
}
function BindEvent(event,fun){
if(this.addEventListener){//執行完DOMExtend後，這裡的this會指向HTMLElement
this.addEventListener(event,fun,false);//標準的事件綁定
}
else{
this.attachEvent("on"+event,fun);//IE的事件綁定
}
}
DOMExtend("bind",BindEvent);//執行功能擴充
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){//這就是我們最終要實現的功能
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>

執行以上這個頁面，在IE9,Chrome,Opera,Firefox等標準瀏覽器裡都能正常觸發tagA的點擊事件，於是現在只剩下一個問題，就是要相容其他瀏覽器；IE瀏覽器之所以出錯，是因為它們隱藏了對HTMLElement的訪問，於是針對IE瀏覽器，我們就不能用HTMLElement.prototype來進行擴充了，但我們可以通過重寫以下幾個函數來達到目的：
　　document.getElementById
　　document.getElementsByTagName
　　document.createElement
　　document.documentElement
　　document.body
　　（PS：記憶中擷取DOM元素好像就是以上這些方法了～不知道還有沒有其他）
　　重寫後，再進行一些處理變換就可以得到以下完整的頁面代碼：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
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<len;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=document.getElementById("tagA");
wrap.bind("click",function(){
alert(this.innerHTML);
})
</script>
</body>
</html>

OK，目前為止已經解決了相容性問題，這是所有瀏覽器都能順利通過的DOM元素擴充的代碼，但是這樣還有一個小問題，細心的人會發現在IE瀏覽器裡面彈出的結果是"undefined"，而不是"你好"；問題的原因在於IE的事件綁定上，看以上代碼，當調用alert(this.innerHTML)的時候，由於IE綁定事件用的是attachEvent，這時候this指向的是windows，於是現在的目標的要改變this指向的對像，將this指向tagA。於是經過修改，完整代碼如下：複製代碼 代碼如下:<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴充</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
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<len;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);
})
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript dom node dom manipulation javascript tutorial javascript dom insertbefore javascript dom childnodes javascript dom class javascript dom table javascript xml dom
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More