写一个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
。 这些方法针对特定类型的选择器进行了优化,通常比通用的querySelector
或querySelectorAll
更高效。 - 兼容性: 使用
querySelectorAll
和getElementsByTagName
,兼容性良好。 - 一致性: 将
getElementById
的结果也转换为数组,以便所有选择器类型都返回相同类型的数据(NodeList 或 HTMLCollection 或 null),使代码更易于使用。 - 错误处理: 添加了对空字符串、null、undefined 和非字符串类型的选择器的处理,返回 null,避免错误。
- 上下文参数: 添加了可选的上下文参数,允许在指定的DOM元素内进行查找,提高了灵活性。
- 代码注释: 添加了详细的注释,解释了函数的功能和参数。
这个版本更加完善,兼顾了性能、兼容性和代码的健壮性。 在实际使用中,根据具体场景选择合适的 API 可以显著提高性能,尤其是在处理大量DOM元素时。 通过区分不同类型的选择器并使用相应的API,可以获得最佳的性能。