javascript-如何生成所有可能的CSS 2选择器组合？
作者：互联网
在文档的当前状态下,为DOM元素生成所有可能的CSS 2选择器组合的最佳方法是什么？
例如：
对于以下标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<div id="content">
<ul>
<li>a</li>
<li>b</li>
<li class="last-li">c</li> <!--ARGUMENT ELEMENT-->
</ul>
</div>
</body>
</html>
使得<！-ARGUMENT ELEMENT->上面的标记作为方法的参数提供,它以数组的形式返回Argument的所有可能的CSS 2选择器组合.可以向该方法添加一个可选参数,该参数将定义CSS 2选择器嵌套的最大深度.如果此参数设置为false,则应返回所有可能的组合(如果设置为false,将成为性能瓶颈)
示例输出：
[
".last-li",
"li.last-li",
"ul .last-li",
"ul li.last-li",
"div ul .last-li",
"div ul li.last-li",
"#content ul .last-li",
"#content ul li.last-li",
"div#content ul .last-li",
"div#content ul li.last-li",
"body div ul li.last-li",
"body div ul .last-li",
"body #content ul li.last-li",
"body div#content ul .last-li",
"body div#content ul li.last-li",
]
这方面的任何指示都将非常有帮助.
解决方法:
首先,让我们坚持选择器的狭窄类别,其中涉及标签名称,类别名称和ID,没有什么比E> F或EF.让我们也不允许类名(.class1.class2.class3)的组合,否则,具有10个类名的单个元素将单独生成400万个选择器.
我们每个完整的选择器均由简单的选择器组成,这些选择器之间用空格隔开.每个简单的选择器都是标签{0,1} id {0,1} class {0,n}的组合-也就是说,每个元素只有一个标签,最多具有一个ID,并且可以具有任意数量的类名.这使我们为单个元素设置了2 * 2 *(n 1)个简单选择器的上限.
给定对DOM元素的引用,它就是标记名,ID和类名.如上所述计算所有可能的简单选择器.让我们将此集合称为A1.将层次结构上移一级到其父级,计算该父级元素的所有简单选择器-这将是集合A2.继续直到您到达html元素-集合Am.现在,您将拥有一个列表,该列表包含m个项目,每个项目都是一组简单的选择器.
现在选择其中一些集合,并找到其笛卡尔积.假设,m =5.您可以选择几套？集合A1始终存在,但其他集合是可选的.对于其中每个,您都可以选择是否选择.这就像二进制数字：
0000 // 0, A1
0001 // 1, A1 x A2
0010 // 2, A1 x A3
0011 // 3, A1 x A2 x A3
0100 // 4, A1 x A4
...
这意味着您将拥有2 ^(m-1)个笛卡尔积.您现在可以将它们转换为字符串.最后一步是删除重复项,请考虑以下示例：
<div>
<div>
<span></span>
</div>
</div>
我们的计算将得出以下列表：
span
div span // inner div
div span // outer div
div div span
这两个div产生重复的选择器.删除那些,工作就完成了.
所有步骤在算法上都很简单.我相信您可以解决这些问题,但是如果您陷于某个地方或需要进一步澄清,请随时在评论中问我.
更新
因此,我决定多使用它并编写了程序,这是您的示例生成的选择器的列表：http://pastie.org/1616164
标签：dom,javascript,css-selectors,jquery 来源： https://codeday.me/bug/20191102/1994715.html