// 获取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();

// 扩展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();

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();

// 创建一个工具函数来为元素添加方法
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();