如何通过类名获取嵌套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删除此代码 来自div的按钮，名为“Grand-grand child”的类

这就是我所做的：

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

targetDiv.innerHTML = "Hello world!";

按钮没有被Hello世界取代！文字，我做错了什么？

Answer 1

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

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

Answer 2

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

修改

如果您想使用纯JavaScript，则可以通过

选择节点元素

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

这应该适用于足够现代的浏览器。