JS小结

<!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”,FireFox打印“#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>&nbsp;</TD>
   <TD>&nbsp;</TD>
   <TD>&nbsp;</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>


 

 

 

 


 

你可能感兴趣的:(JS小结)