请看下列代码:看完此段代码,先别急着往下看。你知道结果为什么是这样吗?
<html>
<head>parentElement Test</head>
<body>
<form name= "a">
<table name= "b ">
<tr name= "c" >
<td name="d">
<select name= "e" onchange="javascript:alert(this.parentElement.parentElement.parentElement.name) ">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
</select>
</td>
<td> </td>
</tr>
<tr> </tr>
</table>
</form>
</body>
</html>
问题:上述代码中,并没有得出我们预想的b,而是undefined。如果把onchange事件中的代码换成:javascript:alert(this.parentElement.parentElement.parentElement.parentElement.name) ,此时才得出我们预想的b。
请看:
<html>
<head>parentElement Test</head>
<body>
<form name= "a">
<table name= "b ">
<!--这里的tbody,不论你写上或是不写,默认都是存在的-->
<tbody name="tbody">
<tr name= "c" >
<td name="d">
<select name= "e" onchange= "javascript:alert(this.parentElement.parentElement.parentElement.name) ">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
</select>
</td>
<td> </td>
</tr>
<tr> </tr>
</tbody>
</table>
</form>
</body>
</html>
还是第一段的代码,只是在<table>标签后加了<tbody>,再运行,弹出提示tbody。正是我们预想的。