如何通过类名获取嵌套div内的元素？

Question

一个带有HTML的网页看起来像这样：

<div id="Parent-div" > </div>
<div class="first-child-div"> </div>
<div class=" second-child-div"> 
    <div class="first-grand-child"> </div>
    <div class="second-grand-child"> </div>
    <div class="Third-grand-child"> 
        <div class="Grand-grand child"> 
           <button  class="Confirm-button">Confirm!</button> 
        </div>
    </div>
</div>

我尝试使用Greasemonkey代码从class名称为“Grand-grand child”的div中删除一个按钮。

我做了这些：

var targetDiv = document.querySelector("#<Parent-div>. Grand-grand.child");

targetDiv.innerHTML = "Hello world!";

按钮没有被“Hello world！”的文本替换，我做错了什么？

- Haz

---

注意：class="Grand grand child" 表示该元素将有两个类，即 grand 和 child。不是一个名为 Grand grand child 的类。 - techfoobar

@techfoobar：我正在使用Greasemonkey编辑一些页面，与上面的示例类似，可能它们是2个类。 - Haz

@j08691：我已经尝试了getelementsbyclassname和querySelector，但没有结果。 - Haz

如果是Greasemonkey，你可以安全地使用document.querySelector，就像PeeHaa的答案中所示。 - techfoobar

@ techfoobar：已经尝试过了，但没有成功。 - Haz

请发布您已经尝试过的JavaScript代码。 - Mechlar

Answer 1

document.querySelector('.Grand.grand.child');

示例：http://jsfiddle.net/yGv3v/

- PeeHaa

---

标准免责声明：仅支持IE8及以上版本。 - Frédéric Hamidi

@Adel：那你的选择器可能是错的。不幸的是，从你的示例中无法确定正确的选择器是什么。如果HTML/DOM确实像你的示例那样，那么PeeHaa的解决方案是有效的：http://jsfiddle.net/2NcaN/. - Felix Kling

@Adel：div的类名是Grand、grand和child，对吗？ - Felix Kling

@Adel：我们只能根据你提供的信息来帮助你。你说你想选择一个具有特定类的元素，这就是我们向你展示如何做到这一点的方法。要么你必须提供更多信息（包括解释什么不起作用），要么最好学习如何调试JavaScript代码：http://www.netmagazine.com/tutorials/javascript-debugging-beginners。 - Felix Kling

另外，您的父级 div 不是实际的父级。 - PeeHaa

Answer 2

你应该将 <div class=" Grand grand child"> 改为 <div class="Grand-grand-child">，然后就可以使用 $('.Grand-grand-child') 来选择它了。

编辑

如果你想使用纯 JavaScript，那么可以通过以下方式选择节点元素：

var grandChildChildNode = document.getElementsByClassName('Third')[0].children[0]

这应该在足够现代的浏览器中工作。

- Alex Williams

---

我无法更改它。页面上的HTML代码就是那样的。我正在使用Greasemonkey从该HTML代码中获取div。 - Haz

@FelixKling $ 在 jQuery 中使用。请参见：https://dev59.com/rmgv5IYBdhLWcg3wMN0U - Eric Lagergren