Question

在下面的HTML标记中，我想查询<div>的{{1}}设置为“ true”，而所包含的孩子将data-parent设置为“ true”并且内部html是“男性”。

data-child-gender

鉴于上述情况，预期的<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>为 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>

Answer 2

没有一个querySelector可以用于此目的（因为您不能使用它来选择元素内的特定文本）。但是，您可以将.querySelector()与.filter()结合使用以获得更具体的结果：

const true_children = [...document.querySelectorAll("[data-parent='true'] [data-child-gender='true']")];
const res = true_children.filter(({innerHTML:g}) => g.trim() === "male");

console.log(res);

<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>

Answer 3

问题描述的问题无法单独使用查询选择器解决。这是由于以下原因：

查询选择器始终对后代起作用，因此在评估子div具有data-child-gender="true"时，将无法返回父元素。查询选择器将返回子div。
在查询选择器中无法评估元素的内部文本或包含的文本。

如果您要在JS中使用查询选择器，则可以通过使用JavaScript来解决这两个限制。

下面的代码片段应该可以工作。

document.querySelectorAll('div[data-parent=true] div[data-child-gender=true]')
.filter(function(elem) {
  return elem.innerText === 'male'; // filter the elements containing male string.
})[0].parentElement; // return the parent of matched element.

硒也可以得出等效逻辑。否则，如果这种太多的逻辑是不可接受的，则可以始终使用更丰富的xpath选择器。 xpath不会有上述任何限制。

HTML JavaScript querySelector查找子元素具有特定数据属性的元素

3 个答案: