Css 仅 Select 嵌套 div 的底部，而不知道它们的嵌套程度

发布于08月25日

我正在try 创建一个不使用类或ID的网站，其 struct 是这样的:

<div>
  <div>
    <div>
      Some content
    </div>
  </div>
  <div>
    Other content
  <div>
</div>

我try 了大约doc.css('div div')个，但返回的是内容的副本，因为嵌套的容器都与该 Select 器匹配.

如果知道它们的深度不同，如何只 Select 嵌套的底部？

这个问题的另一种表达方式是，有没有办法做类似"没有div子级的div"这样的事情？它可能有其他子元素，只是不是div

编辑:

我试着澄清一下，使用上面的html我可以调用:

Doc.css(‘Div Div’).map(&amp；:Text)

以获取文档的文本，该文本被div分成一个array.问题是，该行返回了两次"一些内容"，因为即使它在html中存在一次，也有两个‘div div’与该文本匹配.

推荐答案

此代码查找所有叶元素，并判断它们是否为div.我想这就是你想要做的.

// will be used to store all the leaves
const leaves = [];

// uses recursion to find all the leaves 
const findLeaves = ($branch) => {
    if ($branch.children.length === 0)
    {
        leaves.push($branch);
        return;
    }
    [...$branch.children].forEach(($branch) => findLeaves($branch));
};


// parent element of elements you want to search through
const $branch = document.querySelector("body > div");

// initiate finding leaves
findLeaves($branch);

// remove from all the leaves non divs
const what_you_want = leaves.filter(($leaf) => $leaf.tagName === "DIV");
console.log(what_you_want);