Chain

链式调用的 DOM 操作类，支持创建元素、设置属性、添加事件监听等操作。

API

Chain

构造函数

new Chain(tagName: string, options?: ElementCreationOptions)

主要方法

方法	说明	返回值
`setAttribute`	设置元素属性	`Chain`
`removeAttribute`	移除元素属性	`Chain`
`append`	添加子元素	`Chain`
`remove`	移除子元素	`Chain`
`setTextContent`	设置文本内容	`Chain`
`setStyle`	设置样式	`Chain`
`addChild`	添加子元素（支持数组）	`Chain`
`listen`	添加事件监听	`Chain`
`clearListener`	移除事件监听	`Chain`
`clearAllListener`	移除所有事件监听	`Chain`

属性

属性	说明	类型
`element`	DOM 元素	`HTMLElement`

Example

基础用法

import { Chain } from 'ranuts';

const div = new Chain('div')
  .setAttribute('id', 'myDiv')
  .setAttribute('class', 'container')
  .setTextContent('Hello World')
  .setStyle('color', 'red');

document.body.appendChild(div.element);

链式操作

import { Chain } from 'ranuts';

const button = new Chain('button')
  .setAttribute('type', 'button')
  .setTextContent('Click Me')
  .setStyle('padding', '10px')
  .setStyle('background', 'blue')
  .listen('click', () => {
    console.log('Button clicked');
  });

document.body.appendChild(button.element);

添加子元素

import { Chain } from 'ranuts';

const container = new Chain('div')
  .addChild(new Chain('h1').setTextContent('Title'))
  .addChild(new Chain('p').setTextContent('Content'));

document.body.appendChild(container.element);

批量添加子元素

import { Chain } from 'ranuts';

const list = new Chain('ul').addChild([
  new Chain('li').setTextContent('Item 1'),
  new Chain('li').setTextContent('Item 2'),
  new Chain('li').setTextContent('Item 3'),
]);

document.body.appendChild(list.element);

SVG 元素

import { Chain } from 'ranuts';

const svg = new Chain('svg').setAttribute('width', '100').setAttribute('height', '100');

const circle = new Chain('circle').setAttribute('cx', '50').setAttribute('cy', '50').setAttribute('r', '40');

svg.addChild(circle);

注意事项

链式调用：所有方法都返回 Chain 实例，支持链式调用。
SVG 支持：自动识别 SVG 标签，使用正确的命名空间创建。
事件管理：内部维护事件监听器映射，便于管理和移除。
用途：常用于动态创建 DOM 结构、构建 UI 组件等场景。