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

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

只是无法告诉您如何将 span 与内部文本相匹配。除此之外，所有其他元素都可以使用 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>