dom childNodes問題

Question

我似乎在Mozilla和IE之間得到了fromDate的不同結果。 有沒有更可靠的跨瀏覽器的方式來做到這一點？我實際上得到不同的列值！ [/編輯]

<tr id='id3332201010241' /> 
<td>20101024</td> 
<td>20101025</td> 
<td>1415</td> 
<td>1445</td> 
<td>INVDROP</td> 
<td>H4T1A3</td> 
<td><a href='#' onclick='selectEditActivity("id3332201010241");' >Click Here</a></td> 
</tr> 

function selectEditActivity(pass_id){ 
row = document.getElementById(pass_id);  
var seq = document.getElementById(pass_id).getAttribute("seq"); 
var from_date = row.childNodes[1].innerHTML; 
alert(from_date); 
var to_date = row.childNodes[3].innerHTML; 
} 

Answer 1

您正在看到不同瀏覽器處理空白的差異的結果。相反（更普遍的情況下），可以使用getElementsByTagName()爲肯定獲得（在這種情況下<td>）某種類型的子元素，像這樣：

function selectEditActivity(pass_id){ 
    var row = document.getElementById(pass_id), 
     cells = row.getElementsByTagName("td"), 
     seq = row.getAttribute("seq"), 
     from_date = cells[0].innerHTML, 
     to_date = cells[1].innerHTML; 
    alert("From: " + from_date + "\nTo: " + to_date); 
} 

You can test it out here。正如@patrick指出，雖然，它沒有必要在這裏，只需使用<tr>的.cells，就像這樣：

function selectEditActivity(pass_id){ 
    var row = document.getElementById(pass_id), 
     seq = row.getAttribute("seq"), 
     from_date = row.cells[0].innerHTML, 
     to_date = row.cells[1].innerHTML; 
    alert("From: " + from_date + "\nTo: " + to_date); 
} 

You can test it out here。

Answer 2

您錯誤地作出<tr>自動關閉標籤

<tr id='id3332201010241' /> 

應該

<tr id='id3332201010241'> 

的另一件事是，當你期待，因爲它會包含文本節點childNodes可能無法正常工作。如果你想在一排<td>元素，你應該使用：

var row  = document.getElementById(pass_id); 
var columns = row.getElementsByTagName("td"); 
var from_date = columns[1].innerHTML; 
var to_date = columns[3].innerHTML; 

的的childNodes節點列表包括 元素的所有子節點，包括 （空）文本節點和 註釋節點。 @quirksmode