// 直接使用原生方法（有限链式）
document.querySelector('.my-class')
  .addEventListener('click', () => console.log('Clicked'))
  .classList.add('active'); // 这行会报错，因为addEventListener不返回元素

class DOM {
  constructor(selector) {
    this.elements = document.querySelectorAll(selector);
  }
  
  // 添加类
  addClass(className) {
    this.elements.forEach(el => el.classList.add(className));
    return this; // 返回this实现链式调用
  }
  
  // 移除类
  removeClass(className) {
    this.elements.forEach(el => el.classList.remove(className));
    return this;
  }
  
  // 设置CSS
  css(property, value) {
    this.elements.forEach(el => el.style[property] = value);
    return this;
  }
  
  // 事件监听
  on(event, callback) {
    this.elements.forEach(el => el.addEventListener(event, callback));
    return this;
  }
}

// 使用示例
new DOM('.my-element')
  .addClass('active')
  .css('color', 'red')
  .on('click', () => console.log('Element clicked'));

const $ = (selector) => {
  const elements = document.querySelectorAll(selector);
  
  return {
    elements,
    
    addClass(className) {
      elements.forEach(el => el.classList.add(className));
      return this;
    },
    
    removeClass(className) {
      elements.forEach(el => el.classList.remove(className));
      return this;
    },
    
    css(styles) {
      elements.forEach(el => {
        for (const prop in styles) {
          el.style[prop] = styles[prop];
        }
      });
      return this;
    },
    
    on(event, callback) {
      elements.forEach(el => el.addEventListener(event, callback));
      return this;
    },
    
    hide() {
      elements.forEach(el => el.style.display = 'none');
      return this;
    },
    
    show() {
      elements.forEach(el => el.style.display = '';
      return this;
    }
  };
};

// 使用示例
$('.my-elements')
  .addClass('highlight')
  .css({ color: 'blue', fontSize: '20px' })
  .on('click', () => console.log('Clicked!'));