封装一个DOM库（思路+源码）

2023-12-24 07:18:36

对于开发者来说，DOM(Document Object Model)一直是Web开发的基础。但是，原生DOM API却令人望而却步。为了简化DOM操作，我们封装了一个简洁易用的DOM库，助力开发者轻松构建交互丰富的网页。

封装思路

封装DOM库的核心思想是将原生DOM API封装成一套简洁易用的方法，降低使用难度。DOM库通常提供以下功能：

创建、删除和替换节点
设置和获取节点属性
绑定和触发事件
获取和查找节点
遍历节点树

源码示例

// dom.js
// 一个简单的DOM库

// 创建元素
function create(element) {
  return document.createElement(element);
}

// 删除元素
function remove(element) {
  element.parentNode.removeChild(element);
}

// 替换元素
function replace(element, newElement) {
  element.parentNode.replaceChild(newElement, element);
}

// 设置属性
function setAttribute(element, attribute, value) {
  element.setAttribute(attribute, value);
}

// 获取属性
function getAttribute(element, attribute) {
  return element.getAttribute(attribute);
}

// 绑定事件
function on(element, event, callback) {
  element.addEventListener(event, callback);
}

// 触发事件
function trigger(element, event) {
  element.dispatchEvent(new Event(event));
}

// 获取元素
function get(selector) {
  return document.querySelector(selector);
}

// 查找元素
function find(selector, element) {
  return element.querySelectorAll(selector);
}

// 遍历元素
function each(elements, callback) {
  for (let i = 0; i < elements.length; i++) {
    callback(elements[i], i);
  }
}

// 全局对象
window.dom = {
  create,
  remove,
  replace,
  setAttribute,
  getAttribute,
  on,
  trigger,
  get,
  find,
  each
};

使用示例

// 创建一个div元素
const div = dom.create('div');

// 设置div元素的id属性
dom.setAttribute(div, 'id', 'my-div');

// 获取div元素的id属性
const id = dom.getAttribute(div, 'id');

// 绑定div元素的click事件
dom.on(div, 'click', function() {
  console.log('div被点击了');
});

// 触发div元素的click事件
dom.trigger(div, 'click');

// 获取所有带有class为"item"的元素
const items = dom.find('.item');

// 遍历所有带有class为"item"的元素
dom.each(items, function(item, index) {
  console.log(`第${index + 1}个item: ${item}`);
});