Question

我基本上想这样做：

鉴于我们的DOM如下所示：

<div class="foo bar">
  <ul class="a b c">
    <li class="even">
      <span id="span1">Hello</span>
    </li>
    <li>
      <span id="span2">World</span>
    </li>
    <li class="even">
      <span id="span3">!!!</span>
    </li>
  </ul>
</div>

如何说出它是否与此模式匹配？

<ul class="a c">
  <li class="even">

  </li>
</ul>

或者与该模式匹配：

<ul class="b">
  <li>
    <span>Hello</span>
  </li>
</ul>

类似这样的东西：

matches(el, <ul class="b"><li><span></span></li></ul>)

一些注意事项：

不会有任何通配符，例如匹配动态标签名称。
这些只是部分树，属性值有时是一个子集，就像上面示例中的类名一样。

Answer 1

只是无法告诉您如何将跨度与内部文本匹配。除此之外，可以使用javascript中的CSS选择器检查所有其他元素，如下所示：

if (document.querySelector("ul.a.c > li.even"))
  console.log("Patern 1 found")
  
  if (document.querySelector("ul.b > li > span"))
  console.log("Patern 2 found")
  
  if (document.querySelector("ul.a.c > li.odd"))
  console.log("Patern 3 found")

<div class="foo bar">
  <ul class="a b c">
    <li class="even">
      <span id="span1">Hello</span>
    </li>
    <li>
      <span id="span2">World</span>
    </li>
    <li class="even">
      <span id="span3">!!!</span>
    </li>
  </ul>
</div>

如何在纯JavaScript中找到HTML节点的匹配子树

1 个答案: