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

要兼容所有浏览器的DOM扩展功能，我们需要为每个浏览器提供相应的代码，以确保我们的JavaScript代码在所有浏览器中运行成功。以下是一些我们可以使用的方法：

1. 使用polyfill：Polyfill是一种JavaScript代码，它提供了在旧版本浏览器中缺少的新API和语言特性的兼容性。我们可以使用polyfill来让旧版本的浏览器来支持新的DOM扩展。比如，我们想使用DOM的classList属性，这是用来在DOM元素中添加、删除和检查类的操作。但这个属性只在IE10+以上的浏览器中被支持。所以，在旧版本的浏览器中，我们需要使用polyfill来支持classList。以下是一个classList的polyfill示例：

if (!Element.prototype.classList) {
    Object.defineProperty(Element.prototype, 'classList', {
        get: function () {
            return {
                contains: function (className) {
                    return !!this.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
                },
                add: function (className) {
                    if (!this.contains(className)) {
                        this.className += ' ' + className;
                    }
                },
                remove: function (className) {
                    if (this.contains(className)) {
                        this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
                    }
                },
                toggle: function (className) {
                    if (this.contains(className)) {
                        this.remove(className);
                    } else {
                        this.add(className);
                    }
                }
            };
        }
    });
}

1. 使用现成的库或框架：如果我们不想自己编写polyfill代码，我们也可以使用现成的库或框架，它们通常包含了多个浏览器的兼容性的代码。比如，我们可以使用jQuery或modernizr，它们提供了一些可以直接用来扩展DOM的API。

以下是一个使用jQuery的示例：

//添加一个新的class并删除一个class
$('.my-element').addClass('new-class').removeClass('old-class');

再举一个使用modernizr的示例：

if (Modernizr.classList) {
    //浏览器支持classList
} else {
    //浏览器不支持classList
}

以上是可以用来兼容所有浏览器的DOM扩展的两种方法，我们可以根据实际情况选择其中一种方法来使用。如果需要兼容多个DOM扩展，我们需要相应地为每个扩展提供兼容性支持。