как получить дочерний узел в DIV с помощью JavaScript

Question

Ниже представлена ​​структура моего DIV:

<div id="ctl00_ContentPlaceHolder1_Jobs_dlItems_ctl01_a" 
    onmouseup="checkMultipleSelection(this,event);"> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
      <tr> 
       <td style="width:50px; text-align:left;">09:15 AM</td> 
       <td style="width:50px; text-align:left;">Item001</td> 
       <td style="width:50px; text-align:left;">10</td> 
       <td style="width:50px; text-align:left;">Address1</td> 
       <td style="width:50px; text-align:left;">46545465</td> 
       <td style="width:50px; text-align:left;">ref1</td> 
      </tr> 
     </table> 
</div> 

Теперь, если у меня есть идентификатор DIV, как я могу получить время и адрес для этого DIV используя JavaScript?

Answer 1

var tds = document.getElementById("ctl00_ContentPlaceHolder1_Jobs_dlItems_ctl01_a").getElementsByTagName("td"); 
time = tds[0].firstChild.value; 
address = tds[3].firstChild.value; 

Answer 2

Если вы даете ваш стол уникальный идентификатор, его проще:

<div id="ctl00_ContentPlaceHolder1_Jobs_dlItems_ctl01_a" 
    onmouseup="checkMultipleSelection(this,event);"> 
     <table id="ctl00_ContentPlaceHolder1_Jobs_dlItems_ctl01_a_table" 
       cellpadding="0" cellspacing="0" border="0" width="100%"> 
      <tr> 
       <td style="width:50px; text-align:left;">09:15 AM</td> 
       <td style="width:50px; text-align:left;">Item001</td> 
       <td style="width:50px; text-align:left;">10</td> 
       <td style="width:50px; text-align:left;">Address1</td> 
       <td style="width:50px; text-align:left;">46545465</td> 
       <td style="width:50px; text-align:left;">ref1</td> 
      </tr> 
     </table> 
</div> 


var multiselect = 
    document.getElementById(
       'ctl00_ContentPlaceHolder1_Jobs_dlItems_ctl01_a_table' 
      ).rows[0].cells, 
    timeXaddr = [multiselect[0].innerHTML, multiselect[2].innerHTML]; 

//=> timeXaddr now an array containing ['09:15 AM', 'Address1'];