javascript - クラス名でネストされたdiv内の要素を取得するには?

Question

HTML を含む Web ページは次のようになります。

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

私はグリースモンキーを使用してこのコードを試し、「Grand-grand child」という名前のクラスでdivからボタンを削除しました

これは私がしたことです：

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]

これは十分に最新のブラウザで動作するはずです。