使用 css 选择器查找 DOM 元素的最佳方法

IT技术 javascript css-selectors
2021-03-17 08:53:12

在不使用库的情况下,使用 css 选择器查找 Dom 元素的最简单方法是什么?

function select( selector ) {
 return [ /* some magic here please :) */ ]
};

select('body')[0] // body;

select('.foo' ) // [div,td,div,a]

select('a[rel=ajax]') // [a,a,a,a]

这个问题纯粹是学术问题。我有兴趣了解这是如何实现的以及“障碍”是什么。这个函数的预期行为是什么?(返回数组,或返回第一个 Dom 元素等)。

5个回答

除了自定义 hacks 之外,在最近的浏览器中,您可以使用W3C Selectors API Level 1 中定义的本机方法,即document.querySelector()document.querySelectorAll()

var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");
这现在应该是选定的答案 - 除 IE7 之外的所有现代浏览器都受支持?2013 年 8 月,这对我来说已经足够了!
2021-04-22 08:53:12
2021-05-01 08:53:12
使用 querySelectorAll 时,您将获得一个元素数组,因此如果您需要一个元素,则应在末尾添加 [0]。或者你可以简单地使用 document.querySelector()
2021-05-10 08:53:12

如今,在没有图书馆的情况下做这种事情是疯狂的。但是,我假设您想了解这些东西是如何工作的。我建议您查看 jQuery 或其他 javascript 库之一的源代码。

考虑到这一点,选择器函数必须包含大量 if/else/else if 或 switch case 语句,以便处理所有不同的选择器。例子:

function select( selector ) {
 if(selector.indexOf('.') > 0) //this might be a css class
   return document.getElementsByClassName(selector);
 else if(selector.indexOf('#') > 0) // this might be an id
   return document.getElementById(selector);
 else //this might be a tag name
   return document.getElementsByTagName(selector);
 //this is not taking all the different cases into account, but you get the idea.
};
这在现代浏览器中是不必要的。querySelectedAll() 是一个更好的解决方案。
2021-04-29 08:53:12
不一定——看看 Sizzle(jQuery 的引擎),你不会看到任何这些。
2021-05-07 08:53:12

创建选择器引擎并非易事。我建议从已经存在的东西中学习:

  • Sizzle(由 Resig 创建,在 jQuery 中使用)
  • Peppy(由 James Donaghue 创建)
  • Sly(由 Harald Kirschner 创建)
很棒的链接!非常有意思。特别是那个性能测试运行器。
2021-04-21 08:53:12

这是我使用过几次的一个很好的片段。它真的很小很整洁。它支持所有常见的 css 选择器。

http://www.openjs.com/scripts/dom/css_selector/

不,没有内置的方式。本质上,如果您决定不使用 jQuery,您将在代码中复制它的错误版本。

当然是。“没有 jQuery”,我的意思是没有选择的外部库。
2021-04-20 08:53:12
公平地说,JQuery 不是唯一提供选择器样式功能的库,而是最突出的。
2021-04-28 08:53:12