Подобраться к элементу
 

Обращение к элементу в стиле jQuery

Есть такая конструкция:

<table id="table">
  <tr>
     <td>
        <table>
              <tr>
                   <td>СЮДА!</td>
              </tr>
        <table>
     </td>
  <tr>
<table>

в jQuery чтобы обратиться к определенному элементу TD с таким уровнем вложенности можно так: $('#table table td:eq(0)');

А как на чистом JavaScript подобраться?

Так только до родительского элемента TD получается дойти, а как до самого TD подобраться?

var tb = document.getElementById('table').getElementsByTagName('table');
for(i=0; i<tb.length; i++){
    alert(tb[i]); // тут в цикле все элементы table, а как дальше пойти по вложенности?
}

document.getElementById("#table").getElementsByTagName("table")[0].getElementsByTagName("td")[0]

Учтите только, что если промежуточных элементов не будет в документе, этот кусок кода выкинет ошибку.

В таком случае все зависит от фантазии:)

<table id="table">
  <tr>
     <td>
        <table>
              <tr>
                   <td>СЮДА!</td>
              </tr>
        <table>
     </td>
  <tr>
<table>
<script>
alert(document.getElementById('table').children[0].children[0].children[0].children[0].children[0].children[0].children[0].innerHTML)
var tds = document.getElementsByTagName('td')
for(var i = 0, length = tds.length; i < length; i++) if(tds[i].parentNode.parentNode.parentNode.parentNode.tagName == 'TD') alert(tds[i].innerHTML)
</script>

Cпасибо, а как jQuery удалось так $('#table table td:eq(0)'); изящно организовать доступ к элементам?
Если не сложно объясните.

Я лично не вижу разницы с вариантом subzey.
#table - это .getElementById("#table")
table - это getElementsByTagName("table")[0]
td:eq(0) - это .getElementsByTagName("td")[0]