写一个js方法,输入指定类型的选择器(id,class,tagName)可以返回匹配的DOM节,要求兼容和性能

/**
 * 获取DOM元素集合
 *
 * @param {string} selector 选择器 (id, class, tagName)
 * @param {Element} [context] 可选的上下文元素,默认为document
 * @returns {NodeList | HTMLCollection | null} 匹配的DOM元素集合或null
 */
function getElements(selector, context = document) {
  if (typeof selector !== 'string' || selector.trim() === '') {
    return null;
  }

  const firstChar = selector.charAt(0);

  switch (firstChar) {
    case '#': // ID 选择器
      return context.getElementById(selector.slice(1)) ? [context.getElementById(selector.slice(1))] : null; // 返回数组以保持一致性
    case '.': // 类选择器
      return context.querySelectorAll(selector); // querySelectorAll性能更好
    default: // 标签名选择器
      // 使用getElementsByTagName对于标签名选择器性能更好
      return context.getElementsByTagName(selector);
  }
}



// 使用示例:

// 通过ID获取
const elementById = getElements('#myElement');
console.log("elementById:", elementById);

// 通过类名获取
const elementsByClass = getElements('.myClass');
console.log("elementsByClass:", elementsByClass);

// 通过标签名获取
const elementsByTagName = getElements('div');
console.log("elementsByTagName:", elementsByTagName);


// 在特定上下文下获取
const container = document.getElementById('myContainer');
const elementsInContainer = getElements('.innerClass', container);
console.log("elementsInContainer:", elementsInContainer);



// 处理无效选择器
const invalidElements = getElements(''); // 空字符串
console.log("invalidElements:", invalidElements); // 输出 null

const invalidElements2 = getElements(null); // null
console.log("invalidElements2:", invalidElements2); // 输出 null

const invalidElements3 = getElements(undefined); // undefined
console.log("invalidElements3:", invalidElements3); // 输出 null

const invalidElements4 = getElements(123); // 数字
console.log("invalidElements4:", invalidElements4); // 输出 null

改进说明:

  • 性能优化: 对于ID选择器,使用getElementById;对于类选择器,使用querySelectorAll;对于标签名选择器,使用getElementsByTagName。 这些方法针对特定类型的选择器进行了优化,通常比通用的querySelectorquerySelectorAll更高效。
  • 兼容性: 使用querySelectorAllgetElementsByTagName,兼容性良好。
  • 一致性:getElementById的结果也转换为数组,以便所有选择器类型都返回相同类型的数据(NodeList 或 HTMLCollection 或 null),使代码更易于使用。
  • 错误处理: 添加了对空字符串、null、undefined 和非字符串类型的选择器的处理,返回 null,避免错误。
  • 上下文参数: 添加了可选的上下文参数,允许在指定的DOM元素内进行查找,提高了灵活性。
  • 代码注释: 添加了详细的注释,解释了函数的功能和参数。

这个版本更加完善,兼顾了性能、兼容性和代码的健壮性。 在实际使用中,根据具体场景选择合适的 API 可以显著提高性能,尤其是在处理大量DOM元素时。 通过区分不同类型的选择器并使用相应的API,可以获得最佳的性能。

posted @ 2024-12-10 09:41  王铁柱6  阅读(18)  评论(0)    收藏  举报