当前位置：首页 > 全部内容 > 正文

JavaScript 兼容所有浏览器的 DOM 扩展功能

作者：像素猫

时间：2026-10-26

浏览：333

本文介绍如何在 JavaScript 中扩展 DOM 元素功能，通过重写 HTMLElement.prototype 实现自定义方法。针对 IE 与其他浏览器事件绑定差异，结合 addEventListener 与 attachEvent 实现兼容。最后通过重写 document 方法解决 IE 隐藏访问问题，并修正 this 指向以支持跨浏览器 DOM 扩展。

文章目录

今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。


DOM 扩展基础

有时候我们会想扩展 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>

解决 IE 浏览器兼容性问题

执行以上这个页面，在 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>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

js-cookie 安装与基础用法：set、get、remove 详解

适合JavaScript初学者的实战项目：制作简易待办事项列表

JS打开新标签页时怎么通过URL传递参数

sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧

JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法