javascript - 如何通过类名获取嵌套 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!";

Button 并没有被 Hello world 取代！文字，我做错了什么？

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]

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