如何将JavaScript函数添加到没有jQuery的DOM对象？

在原生JavaScript中向DOM对象添加函数

基础概念

在原生JavaScript中，可以直接为DOM对象添加自定义函数或方法，而不需要依赖jQuery。这可以通过扩展DOM元素的原型或直接为单个DOM元素添加方法来实现。

实现方法

1. 直接为单个DOM元素添加方法

// 获取DOM元素
const myElement = document.getElementById('myElement');

// 为这个元素添加自定义方法
myElement.customMethod = function() {
    console.log('This is a custom method on a DOM element');
    // 可以访问元素本身
    console.log('Element ID:', this.id);
};

// 调用方法
myElement.customMethod();

2. 扩展DOM元素原型（不推荐）

// 扩展HTMLElement原型（影响所有DOM元素）
HTMLElement.prototype.customMethod = function() {
    console.log('This is a custom method available on all DOM elements');
    console.log('Element ID:', this.id);
};

// 现在所有DOM元素都有这个方法
document.getElementById('someElement').customMethod();

注意：扩展原生原型通常不被推荐，因为它可能导致与其他库的冲突或不可预期的行为。

3. 使用类继承方式（更现代的方法）

class CustomElement extends HTMLElement {
    constructor() {
        super();
    }
    
    customMethod() {
        console.log('Custom method from extended class');
    }
}

// 注册自定义元素
customElements.define('custom-element', CustomElement);

// 使用
const element = document.createElement('custom-element');
document.body.appendChild(element);
element.customMethod();

优势

轻量级：不需要加载jQuery等库
性能更好：直接操作DOM，没有中间层
灵活性：可以完全控制方法的实现
现代浏览器支持：所有现代浏览器都支持这些原生方法

应用场景

为特定DOM元素添加自定义行为
创建可复用的DOM操作方法
构建自定义组件
在不使用jQuery的项目中实现类似jQuery的链式调用

注意事项

原型扩展风险：扩展原生原型可能会与其他库冲突
兼容性：某些方法在旧浏览器中可能不支持
性能：频繁操作DOM会影响性能
内存泄漏：确保正确清理事件监听器和引用

更完整的示例

// 创建一个工具函数来为元素添加方法
function addMethodsToElement(element) {
    element.show = function() {
        this.style.display = '';
        return this; // 支持链式调用
    };
    
    element.hide = function() {
        this.style.display = 'none';
        return this;
    };
    
    element.toggle = function() {
        this.style.display = this.style.display === 'none' ? '' : 'none';
        return this;
    };
    
    element.css = function(property, value) {
        if (typeof property === 'object') {
            for (const key in property) {
                this.style[key] = property[key];
            }
        } else {
            this.style[property] = value;
        }
        return this;
    };
    
    return element;
}

// 使用示例
const div = addMethodsToElement(document.querySelector('.my-div'));
div.hide().css({color: 'red', backgroundColor: '#eee'}).show();

这种方法提供了类似jQuery的简洁语法，同时保持了原生JavaScript的性能优势。