在JavaScript中，编写兼容所有浏览器的DOM扩展功能需要考虑到不同浏览器之间的兼容性问题。由于浏览器的实现细节存在差异，直接使用某些现代JavaScript特性（如ES6+的新特性）或DOM API可能在旧版浏览器中无法正常工作。
以下是一些编写兼容所有浏览器DOM扩展功能的建议：
1. **使用Polyfills**：
Polyfills是一段代码（或插件），用于为旧版浏览器提供那些它本身不支持的现代功能。你可以使用像`babel-polyfill`这样的库来为你的代码添加必要的polyfills，以确保它能在所有现代浏览器上运行。
// 引入babel-polyfill（注意：babel-polyfill现已被@babel/polyfill取代，后者又被@babel/runtime-corejs3等模块取代）
// 在你的项目构建过程中，确保通过babel等工具添加适当的polyfills
// 这里不直接展示代码，因为需要配置babel等工具
2. **特征检测**：
在尝试使用某个DOM API之前，先检查该API是否存在于当前环境中。这可以通过简单的`if`语句来完成。
if ('querySelector' in document) {
// 使用querySelector
const element = document.querySelector('.some-class');
} else {
// 退回到更旧的方法，如getElementsByTagName等
const elements = document.getElementsByClassName('some-class');
if (elements.length > 0) {
const element = elements[0];
}
}
3. **避免使用浏览器前缀**：
尽管过去经常需要为不同的浏览器添加特定的CSS属性或JavaScript API前缀（如`-moz-`, `-webkit-`等），但现代浏览器大多已经实现了标准化，并且去除了这些前缀。在编写新代码时，应始终使用无前缀的API和属性。
4. **使用第三方库**：
许多第三方库（如jQuery、Modernizr等）已经为你处理了大部分浏览器兼容性问题。这些库通常提供了一套丰富的API，用于操作DOM、处理事件、进行AJAX请求等，并且已经过广泛的测试，以确保在不同浏览器上的兼容性。
5. **编写条件注释和样式表**：
对于CSS，你可以使用条件注释（尽管这在HTML5中已不推荐使用，但在一些旧版IE浏览器中仍然有效）或媒体查询来为不同的浏览器提供不同的样式表。然而，对于JavaScript，这通常不是必要的，因为你可以通过特征检测来动态地改变行为。
6. **持续测试**：
使用自动化测试工具（如Selenium、Karma等）来确保你的代码在不同浏览器和操作系统上都能正常工作。这些工具可以帮助你捕获并修复潜在的兼容性问题。
请记住，由于浏览器和JavaScript的不断发展，保持代码的最新和兼容性可能需要定期更新你的polyfills、库和测试策略。