嵌套元素的 querySelector 语法答案

【问题标题】：querySelector syntax for nested elements嵌套元素的 querySelector 语法
【发布时间】：2018-09-22 07:57:57
【问题描述】：

我正在尝试获取嵌套在另一个 div 中的 div 元素，但无法让 CSS 选择器字符串正常工作。

我想要的 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，所以找不到。

【问题讨论】：

你的代码，在 sn-p 工作，对吧？
是的，即使没有运行现在添加的 sn-p，我也看不出在这种情况下 cont 怎么可能为空。
似乎您无法在您的问题中重现该问题。
是的，它似乎在这里工作。我无法使用此代码进行复制，因为它被“精简”了。我的 DOM 树更大并且有不同的数据。如果可行，我似乎需要审查结构本身。
检查嵌套框架或阴影域。否则它应该可以工作。

标签： javascript html css-selectors

【解决方案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>

【讨论】：

是的，我试过了，但它不起作用。我一开始以为 DOM 没有加载，但我在 innerHTML 中看到了该元素，所以它就在那里。
它是否嵌套在影子根中？