Posted on 2007-03-19 10:45
itspy 阅读(819)
评论(0) 编辑 收藏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dTD">
<html>
<head>
<title>JS小结</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ｉｒｅＦｏｘ打印“#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是因为，浏览器对表格的实现是有强行规定的，在tr中，只能包含td元素。可以参考标准：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5<br/>
如果你强行加入一些元素，表格结构也不会破坏，浏览器会把你的元素添加到其它地方，比如处于与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/>
平时我们对表格进行操作时，应该养成添加行时对tbody进行操作，而不是直接往table中添加tr元素，这样在不同的浏览器上，会有不同的表现。<br/><br/>
③处的原因我也不知道为什么，反正只有对<tr><td>这类元素进行处理时要小心就是。其它html元素没遇到这类问题。<br/><br/>
④处就是因为不同的浏览器的实现不一样了，在IE中，遇到回车，空格之类的都会过滤了，不显示出来。但在IE中，它将其显示成TEXT节点类型，处理时也要小心点。<br/><br/><br/>
注：示例的运行，需要prototype库。完整可以使用的例子可以在如下地址下载：
http://www.blogjava.net/Files/itspy/test_ajax.rar
</body>
</html>