Как найти DOM элементы, указав явное название class или id?

Question

[webman2004]

Подскажите, пожалуйста, как найти элементы, указав явное название class или id, т.е. сначала ищем div id "main" в нем ищем div class "sub", а в последнем ищем div class "c"?
Смог реализовать только используя childNodes, но это не подходит.
Код на jsfiddle

<div id="main">
  <div class="sub">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
  </div>
  <div class="sub2">
    <div class="a">A2</div>
    <div class="b">B2</div>
    <div class="c">C2</div>
  </div>
</div>

function getDiv() {
	var elements = document.getElementById('main').childNodes[1].childNodes[5];
	alert(elements.outerHTML);
  var elements = document.getElementById('main').childNodes[3].childNodes[5];
  alert(elements.outerHTML);
}
getDiv();

Answer 1

[danforth]

var single = document.querySelector("#main .sub .c"); 
var all = document.querySelectorAll(".a"); // вернет все элементы с классом "а"

Comments

[webman2004]

Спасибо! Это то что нужно!

Answer 2

[Денис Инешин]

querySelector and querySelectorAll вам помогут

Comments

[webman2004]

Спасибо!

Answer 3

[Давид]

если делать с jquery:
$('#main .sub').find('.c:last-child')