js 实现jquery find
使用原生 JavaScript 实现类似 jQuery 的 find 方法
jQuery 的 find 方法用于在当前元素的子元素中查找匹配选择器的元素。以下是几种原生 JavaScript 的实现方式：
使用 querySelectorAll 实现
function find(selector, context) {
context = context || document;
return context.querySelectorAll(selector);
}这个实现简单直接，但需要注意它返回的是 NodeList 而非数组。
递归实现查找子元素
function find(selector, parent) {
parent = parent || document;
let elements = [];
const children = parent.children;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.matches(selector)) {
elements.push(child);
}
elements = elements.concat(find(selector, child));
}
return elements;
}这个实现更接近 jQuery 的实际行为，递归查找所有子元素。
使用 Element.prototype 扩展方法
Element.prototype.find = function(selector) {
return this.querySelectorAll(selector);
};
// 使用示例
document.find('#container').find('.item');这种方法为所有 DOM 元素添加了 find 方法，类似于 jQuery 的链式调用。
兼容性更好的实现
function find(selector, context) {
context = context || document;
try {
return context.querySelectorAll(selector);
} catch(e) {
const elements = [];
const children = context.getElementsByTagName('*');
for (let i = 0; i < children.length; i++) {
if (children[i].id === selector.replace('#', '') ||
children[i].className.split(' ').indexOf(selector.replace('.', '')) !== -1) {
elements.push(children[i]);
}
}
return elements;
}
}这个实现提供了基本的回退方案，在不支持 querySelectorAll 的旧浏览器中也能工作。
注意事项
- 原生 JavaScript 方法通常返回 NodeList 而非 jQuery 对象
- 如果需要链式调用，可以封装返回对象
- 性能上
querySelectorAll通常是最优选择 - 复杂选择器可能需要额外处理
这些实现提供了从简单到复杂的不同方案，可以根据具体需求选择合适的实现方式。
