Posted on 2007-03-19 10:45
itspy 閱讀(834)
評論(0) 編輯 收藏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>JS小結(jié)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript" src="prototype.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function hello(){
?
alert($("testCell").parentNode.nodeName); //①應該打印div,實際打印"tr"
alert($("testLine").parentNode.nodeName); //②應該打印table,實際打印"tbody"
var tr = document.createElement("tr");
tr.innerHTML="<td>abc</td>";
alert(tr.innerHTML); //③打印的為“abc</td>”
alert($("testCell").nextSibling.nodeName); //④IE打印“TD”，F(xiàn)ｉｒｅＦｏｘ打印“#text"
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</head>
<body>
<br/>
<table width="300" border="1">
?
? <TR id="testLine">
?<div id="testDIV">
? ?<TD? id="testCell" >2</TD>
? ?<TD> </TD>
? ?<TD> </TD>
? ?<TD> </TD>
?</div>
? </TR>?
</table>
<br/>
<INPUT TYPE="submit" onclick="hello();">
?
<br/>
①：此處無法打印div是因為，瀏覽器對表格的實現(xiàn)是有強行規(guī)定的，在tr中，只能包含td元素。可以參考標準：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5<br/>
如果你強行加入一些元素，表格結(jié)構也不會破壞，瀏覽器會把你的元素添加到其它地方，比如處于與Table同一層次的級別。<br/><br/>
②此處與第一處一樣，沒有打印出table，是因為你雖然沒有在table中定義tbody，但是w3c標準定義了table中一定要包含至少一個tbody。<br/>
<!ELEMENT TABLE - -(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>，詳情可以參考：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1<br/>
?平時我們對表格進行操作時，應該養(yǎng)成添加行時對tbody進行操作，而不是直接往table中添加tr元素，這樣在不同的瀏覽器上，會有不同的表現(xiàn)。<br/><br/>
③處的原因我也不知道為什么，反正只有對<tr><td>這類元素進行處理時要小心就是。其它html元素沒遇到這類問題。<br/><br/>
④處就是因為不同的瀏覽器的實現(xiàn)不一樣了，在IE中，遇到回車，空格之類的都會過濾了，不顯示出來。但在IE中，它將其顯示成TEXT節(jié)點類型，處理時也要小心點。<br/><br/><br/>
注：示例的運行，需要prototype庫。完整可以使用的例子可以在如下地址下載：
http://www.aygfsteel.com/Files/itspy/test_ajax.rar
</body>
</html>
?
?
?
?
?