How to get an element inside nested divs by class name?

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?

Note: `class="Grand grand child"` means the element will have 2 classes namely `grand` and `child`. Not one class named *Grand grand child* — techfoobar, Feb 20 '13 at 15:21
@techfoobar: I'm using greasemonkey to edit some page with the same example above, probably, they are 2 classes — Haz, Feb 20 '13 at 15:28
@j08691: I have tried getelementsbyclassname and querySelector with no result — Haz, Feb 20 '13 at 15:30
If its greasemonkey, you can safely use `document.querySelector` as in PeeHaa's answer. — techfoobar, Feb 20 '13 at 15:30

PeeHaa · Accepted Answer · 2013-02-20T17:50:18.620

14

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

Demo: http://jsfiddle.net/yGv3v/

edited Feb 20 '13 at 17:50

answered Feb 20 '13 at 15:27

PeeHaa

71,436
58
190
262

2

Standard disclaimer: IE8+ only. – Frédéric Hamidi Feb 20 '13 at 15:28
var targetDiv = document.querySelector(".Grand.grand.child"); targetDiv[0].innerHTML = "Hello world!"; Didn't work – Haz Feb 20 '13 at 15:37
@AdelSalah: Well, `targetDiv[0]` is `undefind` because DOM elements don't have a property with name `0`. `.querySelector` returns a DOM element, not a list. And of course you have to make sure that the selector is right. Your example is confusing in this regard. – Felix Kling Feb 20 '13 at 15:38
@AdelSalah If there will be more elements you want to match you can use `.querySelectorAll()`. – PeeHaa Feb 20 '13 at 15:41
@Adel: Then your selector might be wrong. Unfortunately it is not possible from your example to determine what the correct selector would be. If the HTML/DOM really is like in your example, then PeeHaa's solution **does work**: http://jsfiddle.net/2NcaN/. – Felix Kling Feb 20 '13 at 15:44
@PeeHaa How to implement it in my case? – Haz Feb 20 '13 at 15:45
@FelixKling: Don't understand what do you mean by my selector is wrong. To make it short; I'm trying to get the sub-sub-div by class name using javascript.. – Haz Feb 20 '13 at 15:50
@Adel: And the div's class names are `Grand`, `grand` and `child`, yes? – Felix Kling Feb 20 '13 at 15:51
@FelixKling This is the actual class name: id-container-buttons id-confirm-Buttons – Haz Feb 20 '13 at 15:57
@Adel: So then the selector is `.id-container-buttons.id-confirm-Buttons`. If you want to narrow it even more down: `# .id-container-buttons.id-confirm-Buttons`. – Felix Kling Feb 20 '13 at 15:58
@FelixKling: I've already tried your suggestion with no luck:( – Haz Feb 20 '13 at 16:04
1

@Adel: Well, we can only help you based on the information you've given us. You said you want to select an element with a specific class and that's what we showed you how to do it. Either you have to provide more information (including an explanation *what* does not work) or better, learn how to debug JavaScript code: http://www.netmagazine.com/tutorials/javascript-debugging-beginners. – Felix Kling Feb 20 '13 at 16:08
@FelixKling: I'm going to re-edit my question if that would help me get an answer – Haz Feb 20 '13 at 16:14
@FelixKling: I did what you advised and debuged the code and that's what I got: ReferenceError: querySelector is not defined – Haz Feb 20 '13 at 17:29
@Adel: That's strange because `.querySelector` exists since FF 3.5: https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector. I don't know enough about Greasemonkey though. All I can say is, follow their tutorials and make sure you are executing the code at the right time. – Felix Kling Feb 20 '13 at 17:41
@AdelSalah You are supposed to change the id to your actual id and that dot should belong to your class. – PeeHaa Feb 20 '13 at 17:43
Also your parent div is not the parent. – PeeHaa Feb 20 '13 at 17:49
@PeeHaa: Your answer is correct. The problem is with GreaseMonkey; The child divs were loaded right after my script, that's why queryselector couldn't find the grand child Div – Haz Feb 20 '13 at 18:24
@FelixKling: I'm looking for a way to make my script runs after the page fully loaded. Thank you both for help. and sorry for inconvience – Haz Feb 20 '13 at 18:27

Alex Williams · Answer 2 · 2013-02-20T16:20:39.267

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

edited Feb 20 '13 at 16:20

answered Feb 20 '13 at 15:26

Alex Williams

355
1
4

I can't change it. The HTML code on the page is just like that. I'm using greasemonkey to get the div from that HTML code – Haz Feb 20 '13 at 15:39
@FelixKling `$` is used in jQquery. See: http://stackoverflow.com/questions/10787342/why-does-jquery-have-dollar-signs-everywhere – Eric Lagergren Jul 18 '14 at 08:39

How to get an element inside nested divs by class name?

2 Answers2