Question

我正在尝试将div元素嵌套在另一个div中，但无法使CSS Selector字符串起作用。

我想要的div没有唯一的标识符，但深藏在另一个div中。我已经得到了顶级div，但不知道如何获得嵌套的div。

DOM：

var obj = document.body.querySelector('.qvobject[data-qlikobjectid="XFvnjF"]');
console.log(obj);

var cont = obj.querySelector('.kpi-value');
console.log(cont);

<div class="qvobject" data-qlikobjectid="XFvnjF">
  <div>
    <div>
      <div class="kpi-value">I WANT THIS</div>
    </div>
  </div>
</div>

结果是“obj”是正确的对象，但“cont”为null，因此无法找到它。

Answer 1

您可以使用子选择器选择它。只需在父选择器和子选择器之间放置一个空格。

这使得遍历器更进一步到dom中的任何级别以选择所需的元素。

var element = document.querySelector('.qvobject[data-qlikobjectid="XFvnjF"] .kpi-value');

console.log(element);

<div class="qvobject" data-qlikobjectid="XFvnjF">
  <div>
    <div>
      <div class="kpi-value">I WANT THIS</div>
    </div>
  </div>
</div>

嵌套元素的querySelector语法

1 个答案: