如何获取节点内的节点

Question

假设我有一个名为 myNode:

的变量

myNode = document.getElementsByTagName('li')[0];

这是 myNode.outerHTML 的样子：

<li>
  <div class="_4ofi">
    <div class="_4ofp">
      <div class="_4ofr">
        <div class="_2hq-">
          <i class="img sp_RGPCxTkOR8i_1_5x sx_20baa4" alt=""></i>
        </div>
      </div>
      <div class="_4ofr">
        <div>My div</div>
        <div class="_9079">My caption</div>
      </div>
    </div>
    <div class="_4ofr">
      <div aria-checked="false" aria-disabled="false"
           class="_kx6 _kxa _4ofs" role="checkbox" tabindex="0">
      </div>
    </div>
  </div>
</li>

我需要访问以 <div aria-checked="false"> 开头的 div，但是因为这个 div 没有 ID。我想我需要遍历 myNode 元素来找到它并单击它。

所以我尝试了这个：

for (var i=0;i<myNode.length;i++) { console.log(myNode[i]); };

不知何故myNode.lengthreturnsundefined.

我错过了什么？

Answer 1

如果你使用document.querySelector，你可以select一个元素的一个属性。

document.querySelector('li div[aria-disabled="false"]')

如果类不打算改变，可以增加select或者specificity。如果 myNode 是 li（列表项）的列表，那么您可以从所需索引处的该节点进行查询。

myNode[i].querySelector('._4ofi ._4ofr div[aria-disabled="false"]')

此外，您可以迭代结果集以提高可读性。

myNodes.forEach(node => myNode.querySelector('div[aria-disabled="false"]'));

其中 myNodes 是 li 个元素的集合。

Answer 2

我假设您无法修改 DOM。否则只需为您要访问的元素设置一个 id 并使用

获取它

document.getElementById('myId')

如果无法触摸 DOM:

myNode.length returns undefined 因为返回值不是数组。它是一个对象。您通过调用
访问它的子节点
myNode.childNodes

对于具有“aria-check”的特定节点。您可以直接访问：

 document.getElementsByTagName('li')[0].childNodes[1].childNodes[3].childNodes[1]

不确定为什么有人想以这种方式访问节点，但你知道了。

Answer 3

var myNode = document.getElementsByTagName('li');

for (var i=0;i<myNode.length;i++) {
  console.log(myNode[i].querySelector('._4ofr div[aria-disabled="false"]'));
};

试试这个，它会给你 aria-checked="false" div 内容，fiddle link

如何获取节点内的节点

How to get node inside a node

javascript

google-chrome-devtools