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

Question

A webpage with HTML looks like this:

<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>

I've Tried This code using greasemonkey to remove a button from the div with the class named "Grand-grand child"

This is what I did:

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

targetDiv.innerHTML = "Hello world!";

The Button wasn't replaced by the Hello world! text, What did I do wrong?

Answer 1

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

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

Answer 2

You should change <div class=" Grand grand child"> to <div class="Grand-grand-child"> and then you can select it with $('.Grand-grand-child') .

Edit

If you want to use pure JavaScript, then you can select the node element via

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

This should work in sufficiently modern browsers.