javascript - HTML JavaScript querySelector 用于查找其子元素具有特定数据属性的元素

Question

在下面的 HTML 标记中，我想查询 <div>有一个 data-parent设置为“true”，并且包含的​​子项有 data-child-gender设置为“true”并且内部 html 为“male”。

    <div id="grandparent">
      <div id="parent1" data-parent="true">
        <div id="child1" data-child-gender="false">
          male
        </div>
      </div>
      <div id="parent2" data-parent="true">
        <div id="child2" data-child-gender="true">
          female
        </div>
      </div>
      <div id="parent3" data-parent="false">
        <div id="child3" data-child-gender="true">
          female
        </div>
      </div>
      <div id="parent4" data-parent="true">
        <div id="child4" data-child-gender="true">
          male
        </div>
      </div>
    </div>

鉴于上述情况，预期 <div>是parent4。

要使用什么 JavaScript querySelector？

Answer 1

首先使用querySelectorAll它将给出一个数组。然后迭代它并检查并获取具有所需 data 属性的元素。

之后，您可以使用 if 并检查其中的内容

let k = document.querySelectorAll('[ data-parent=true]').forEach(function(item) {
  let elem = item.querySelector('[data-child-gender=true]');
  if (elem !== null && elem.innerHTML.trim() === 'male') {
    console.log(item.id)
  }
})

<div id="grandparent">
  <div id="parent1" data-parent="true">
    <div id="child1" data-child-gender="false">
      male
    </div>
  </div>
  <div id="parent2" data-parent="true">
    <div id="child2" data-child-gender="true">
      female
    </div>
  </div>
  <div id="parent3" data-parent="false">
    <div id="child3" data-child-gender="true">
      female
    </div>
  </div>
  <div id="parent4" data-parent="true">
    <div id="child4" data-child-gender="true">
      male
    </div>
  </div>
</div>