没法获取未定义或 null 引用的属性“firstChild”
日期：2014-05-16 浏览次数：20790 次
无法获取未定义或 null 引用的属性“firstChild”
<script language="javascript">
function Ba()
{
var name=document.getElementById("dv");
var c=name.lastChild.firstChild.firstChild.innerHTML;
alert(c);
}
</script>
<body>
<table id="dv">
<thead>
<td>学期</td>
<td>姓名</td>
<td>班级</td>
</thead>
<tbody>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
</tbody>
</table>
<input type="button" value="查看" onclick="Ba()">
</body>
为什么会报 无法获取未定义或 null 引用的属性“firstChild”
------解决方案--------------------
alert(name.lastChild);
得到的结果是 #text，说明这是一个文本结点。
删除table内部所有的回车后，得到正确的结果123
------解决方案--------------------
因为dom指针不仅可以指向元素，也可以指向文本节点。这里取不到你想要的节点是因为XML存在一个有争议的地方：空格。换行被认为是一个空格，意味着这是一个文本节点，所以name.lastChild取到的已经是文本节点了。在IE9和其他主流浏览器都存在这种情况，可改用jquery来操作dom，或先判断浏览器类型再执行不同的操作，或者根据节点的nodeType判断其是否文本节点，nodeType值为3表示其为文本节点。
<script language="javascript">
function Ba()
{
var name=document.getElementById("dv");
var c=name.lastChild.firstChild.firstChild.innerHTML;
alert(c);
}
</script>
<body>
<table id="dv">
<thead>
<td>学期</td>
<td>姓名</td>
<td>班级</td>
</thead>
<tbody>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
</tbody>
</table>
<input type="button" value="查看" onclick="Ba()">
</body>
为什么会报 无法获取未定义或 null 引用的属性“firstChild”
------解决方案--------------------
alert(name.lastChild);
得到的结果是 #text，说明这是一个文本结点。
删除table内部所有的回车后，得到正确的结果123
------解决方案--------------------
因为dom指针不仅可以指向元素，也可以指向文本节点。这里取不到你想要的节点是因为XML存在一个有争议的地方：空格。换行被认为是一个空格，意味着这是一个文本节点，所以name.lastChild取到的已经是文本节点了。在IE9和其他主流浏览器都存在这种情况，可改用jquery来操作dom，或先判断浏览器类型再执行不同的操作，或者根据节点的nodeType判断其是否文本节点，nodeType值为3表示其为文本节点。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
